React-native-router-flux: كيف تصمم شريط التنقل؟

aksonov سيكون هذا مفيدًا جدًا بالنسبة لي أيضًا. إنني أتطلع إلى استخدام أنماط Android ويبدو أن العمل أقل بكثير للقيام بذلك بدلاً من إنشاء رأس مخصص.

شكرا لهذا المشروع بالمناسبة ... إنه مثالي!

يمكنك تغيير لون خلفية شريط التنقل على Router .

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} sceneStyle={styles.routerScene}>
    <Schema .../>
    <Route .../>
</Router>

const styles = StyleSheet.create({
  navBar: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red', // changing navbar color
  },
  navTitle: {
    color: 'white', // changing navbar title color
  },
  routerScene: {
    paddingTop: Navigator.NavigationBar.Styles.General.NavBarHeight, // some navbar padding to avoid content overlap
  },
})

pewh هل هذا ممكن مع أجهزة التوجيه المتداخلة؟ أحاول الحصول على أشرطة تنقل مختلفة الأنماط لشاشات مختلفة. على سبيل المثال ، قد تحتوي إحدى الشاشات على شريط تنقل أخضر وقد تحتوي شاشة أخرى على شريط تنقل أحمر.

الكود أدناه المسارات بشكل صحيح ، ومع ذلك لا يتم تطبيق أي نمط على شريط التنقل في مسار تسجيل الدخول .

`<جهاز التوجيه>

            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
            </Route>
        </Router>`

const styles = StyleSheet.create({ navBar: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: 'green', }, navTitle: { color: 'white', } });

Apoligies للتصميم السيئ ... لا يمكنني معرفة كيفية تنسيقه بشكل صحيح.

أشكرك pewh ! بفضلك اكتشفت للتو أنني لم أتمكن من تخصيص شريط التنقل بسبب هذا التداخل ، فقد نجحت أحيانًا في تخصيص شريط التنقل عن طريق التوفيق بين سمات hideNavBar و showNavigationBar.
ومع ذلك ، باتباع الإرشادات الخاصة بك ، يتم تخصيص شريط التنقل جيدًا ولكن عندما أقوم بالتبديل بين علامات التبويب ، يعرض شريط التنقل اسم علامة التبويب السابقة بدلاً من زر "الرجوع". هذا هو الكود الخاص بي ، هل يمكنك مساعدتي في اكتشاف الخطأ؟

<Router name="root" hideNavBar={true} showNavigationBar={false} navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} sceneStyle={styles.routerScene} >
              <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
              <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
              <Schema name="tab" type="switch" icon={TabIcon} />

              <Route name="register" schema="modal" component={registerComponent} />
              <Route name="login" schema="modal" component={loginComponent} />

              <Route name="tabbar" style={styles.tabBar} >
                  <Router navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle}>
                    <Route name="newsFeed" schema="tab" title="News" component={newsFeedComponent} />
                      <Route name="notifications" schema="tab" title="Notif." component={notificationsComponent} />
                      <Route name="events" schema="tab" title="Events" component={eventsComponent} />
                  </Router>
              </Route>
          </Router>

يرجى ملاحظة أنه إذا قمت بتغيير hideNavBar و showNavigationBar ، فسوف أحصل على النواتج التالية:

• hideNavBar = {true} showNavigationBar = {true}: شريطان للتنقل ، الأعلى بهما زر "رجوع" فقط (<) والجزء السفلي يحتوي على العنوان وزر الرجوع "<_Title of previous screen_" (حتى عندما التبديل بين علامات التبويب)
• hideNavBar = {false} showNavigationBar = {true}: idem مما ورد أعلاه
• hideNavBar = {true} showNavigationBar = {false}: شريط تنقل بنمط واحد ، مع العنوان وزر الرجوع "<_Title of previous screen_" (حتى عند التبديل بين علامات التبويب)
• hideNavBar = {false} showNavigationBar = {false}: idem مما ورد أعلاه

لا أستطيع حقاً فهم الفرق بين hideNavBar و showNavigationBar وتأثيراتهما للحصول على الناتج المتوقع: شريط واحد مع عنوان الشاشة وزر الرجوع الذي يجب أن يظهر فقط عند التعامل مع الشاشات "المكدسة" ، وليس عند التبديل بين علامات التبويب.

شكرا جزيلا للمساعدة

مرحبًا thngdude ، يمكنك تصميم Router . انظر إلى هذا أدناه لمعرفة ما أعنيه. لم أختبر هذا الرمز أدناه ، لذا يرجى إعلامي إذا كان هناك خطأ ما.

        <Router>
            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.greenNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
                <Router navigationBarStyle={styles.redNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signupmain" component={SignUp} title="SignUp"/>
                </Router>
            </Route>
        </Router>

أو افعل هذا إذا لم يعمل أعلاه.

        <Router>
            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.greenNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
            </Route>

            <Route name="signup">
                <Router navigationBarStyle={styles.redNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signupmain" component={SignUp} title="SignUp"/>
                </Router>
            </Route>
        </Router>

ملاحظة: قم باللف باستخدام علامة خلفية ثلاثية بدلاً من علامة خلفية واحدة (`) لتنسيق كود متعدد الأسطر.

مرحبًا KBLNY ، أنا سعيد لأنني أستطيع مساعدتك في مشكلتك: ابتسم:
يبدو أنك نسيت تضمين footer prop في Router داخل مسار tabbar.
لذلك يجب أن يكون الرمز الخاص بك:

Router name="root" hideNavBar={true} showNavigationBar={false} navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} sceneStyle={styles.routerScene} >
              <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
              <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
              <Schema name="tab" type="switch" icon={TabIcon} />

              <Route name="register" schema="modal" component={registerComponent} />
              <Route name="login" schema="modal" component={loginComponent} />

              <Route name="tabbar" style={styles.tabBar} >
                  <Router footer={TabIcon}  navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle}>
                    <Route name="newsFeed" schema="tab" title="News" component={newsFeedComponent} />
                      <Route name="notifications" schema="tab" title="Notif." component={notificationsComponent} />
                      <Route name="events" schema="tab" title="Events" component={eventsComponent} />
                  </Router>
              </Route>
          </Router>

ولا تنس تضمين مكون TabIcon.

class TabIcon extends React.Component {
    render(){
        return (
            <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
        );
    }
}

لم أختبره ، لكن يجب أن يعمل.

مرحبًا يا شباب ، أي علاقات عامة حول تحسين المستندات ستكون مفيدة جدًا ، شكرًا.

pewh شكرًا ، لقد جربت اقتراحاتك ، ويظهر

شكرا pewh حصلت عليه للعمل. ومع ذلك ، أصبح الحصول على أنماط وانتقالات Android أمرًا صعبًا إلى حد ما. هذا يبدو أن مشكلة الملاح السابق الأساسية https://github.com/exponentjs/ex-navigator/issues/24 ستحل هذه المشكلة. من الناحية المثالية ، إذا كان المستخدم يعمل بنظام Android وتم تعيين hideNavBar={false} ... يجب أن يبدو مثل Android.

يبدو أن Navigator.NavigationBar.StylesAndroid يفتح علبة من الديدان وكل NavigatorBar موثق بشكل سيئ. ليس لدي الوقت حقًا للانغماس في هذا حاليًا ، لذا قد أحاول العثور على مكون NavBar آخر بدلاً من ذلك.

* تعديل *

الحفر أعمق في ToolbarAndroid سيذهب إلى التذكرة. سيسمح لي استخدام الخاصية المدمجة header بدمج هذا.

https://github.com/facebook/react-native/blob/master/Examples/Movies/MoviesApp.android.js#L50 -L56

تم إصدار 3.0 مع مستندات محسّنة. يتم إغلاقه الآن لأنه إصدار قديم (2.x)

alirezavalizade سأستخدم مكون شريط الحالة في الصفحة ذات الخلفيات الداكنة:
https://facebook.github.io/react-native/docs/statusbar.html

كيف يمكن للمرء إزالة ما يشبه حوالي 20 بكسل من المساحة المتروكة في الجزء العلوي من شريط التنقل إذا كان تطبيقك لا يعرض شريط الحالة؟ لقد جربت أعلى: -10 ، و marginTop: 0 ، إلخ. ولكن لا يبدو أنها محاذاة العناصر (زر الرجوع والعنوان) بشكل صحيح إلى وسط الصف.

هل من الممكن إضافة أزرار مخصصة إلى شريط التنقل على الإطلاق؟

@ robtg4 كنت أتساءل عن نفس الشيء ، نموذج navbar هنا محير للغاية منذ أن بدأت للتو.

حسنًا ، لقد صنعت مكونًا إضافيًا لذلك فهو يستخدم بالكامل لتحقيق ما تريد.
سواء كان شريط الحالة أو لون شريط التنقل

https://github.com/BhavanPatel/react-native-navbar-color

https://www.npmjs.com/package/react-native-navbar-color

BhavanPatel ، هل يعمل لنظام iOS؟

alexpavlovaskblue نعم ، يرجى التحقق من الملف التمهيدي

الطريقة الأخرى الممكنة لتغيير لون الخلفية لشريط الحالة وشريط التنقل لجهاز Android هي من خلال الوحدة النمطية StatusBar و NativeModules

ويمكنك التحقق من رابط الإجابة أدناه

https://stackoverflow.com/a/66415888/10646511