React-native-router-flux: تصميم نافبار

خطئي ، سأقوم بالتوثيق لاحقًا (أو يمكن لشخص آخر القيام به ، سيكون رائعًا حقًا) بالنسبة لأي مستندات فائتة ، راجع مستندات exNavigator - يقوم جهاز التوجيه فقط بتمرير جميع المعلمات إلى مكون ExNavigator. كما يمكنني أن أرى ، يمكنك استخدام معلمة navigationBarStyle.

يبدو أن exNavigator يفتقر إلى التوثيق أيضًا :)
https://github.com/exponentjs/ex-navigator/issues/18

: +1:

هل يعمل نظام NavigationBarStyle من أجلك؟

تمت إضافة rightButtonStyle و backButtonBarStyle و rightButtonTextStyle بالإضافة إلى renderLeftButton و renderRightButton و RenderBackButton لتخصيص شريط التنقل.

navigationBarStyle كخاصية Schema لا يعمل بشكل صحيح. يبدو أنه لم يتم تمرير الخاصية إلى ExNavigator . سيكون من الجيد إتاحة خصائص ExNavigator أيضًا ، من أجل الاكتمال: titleStyle ، barButtonTextStyle ، barButtonIconStyle

navigationBarStyle هو خاصية لجهاز التوجيه ، وليس للمسار. يتم تمرير جميع خصائص جهاز التوجيه إلى ExNavigator ، يمكنك التحقق من المصادر ، ويجب أن تعمل خارج الصندوق.

هناك بالتأكيد شيء غير تقليدي يحدث. جرب استخدام هذه المخططات مع المثال:

            <Schema name="modal" navigationBarStyle={{backgroundColor: 'green'}} sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
            <Schema name="default" navigationBarStyle={{backgroundColor: 'brown'}} sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
            <Schema navigationBarStyle={{backgroundColor: 'blue'}}  name="withoutAnimation"/>
            <Schema navigationBarStyle={{backgroundColor: 'red'}}  name="tab" type="switch" icon={TabIcon} />

ثم انتقل إلى علامة التبويب وانتقل إلى علامات تبويب مختلفة. كم منهم لديه أشرطة حمراء؟

بغض النظر ، لقد أخطأت في قراءة ما كتبته. أرى أن الخاصية تتناسب مع Router ، وليس Schema . آسف.

aksonov اختبرته وحصلت عليه للعمل. سأحاول تعديل المثال وإجراء عملية كتابة بسيطة

لدي طلبان لتصميم شريط التنقل ، إذا كنت لا تمانع.

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

أود أيضًا إزالة كلمة "home" من النص الأيسر وتغيير كل النص الموجود في Navbar إلى اللون الأبيض.

شكرا لك مقدما.

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

igin يجب أن تكون قادرًا على تمرير مكون navbar إلى header={} على كل جهاز توجيه ، على الأقل: https://github.com/aksonov/react-native-router-flux#router

andreasbhansen نعم أعتقد أنك على حق ... سيستغرق الأمر

الآن الإصدار 2.0 مر على مثيل جهاز التوجيه النقي كدعم لجهاز التوجيه.

@ joshuarotenberg هل تمكنت من ضبط نمط زر الرجوع إلى الأبيض؟ مررت backButtonBarStyle كدعم للمسار والموجه ولا يفعل أي شيء على أي منهما.

joelcloralt PR # 118 يجب إصلاحه ، يرجى التحقق

أستطيع أن أؤكد هذا العمل. الشيء الأساسي الذي يجب ملاحظته هو أن الرمز يأخذ tintColor والنص يأخذ color كأنماط. لذلك بالنسبة لأي شخص آخر يرغب في تخصيص ألوان NavBar ، فإليك ما أملكه:

حتى الإصدار التالي ، قم بتعديل ExRouter.js بهذا الالتزام: https://github.com/aksonov/react-native-router-flux/commit/b5b9b2f8a85285695869e0d21595293304f793fc

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} barButtonTextStyle={styles.barButtonTextStyle} barButtonIconStyle={styles.barButtonIconStyle}>
 //some routes...<Route .... /> 
</Router>

والأنماط:

navBar: {
    backgroundColor:'#0D47A1',
},
navBarTitle:{
    color:'#FFFFFF'
},
barButtonTextStyle:{
    color:'#FFFFFF'
},
barButtonIconStyle:{
    tintColor:'rgb(255,255,255)'
},

أعتقد أنه يمكنني إغلاقها الآن.

كيفية تغيير لون الساعة وحالة wifi ولا أعرف ما هو هذا الاسم ... :)

  <Scene key="app" navigationBarStyle={{backgroundColor: '#1e2226'}}  titleStyle={{color : "#FFF"}}>
    <Scene  key="welcome" component={LauchContainer} title="Welcome" />
    <Scene key="counter" component={CounterContainer} title="dsfdsfdsf" />
  </Scene>

alirezavalizade : يمكنك إجراء هذا التغيير في xCode http://stackoverflow.com/a/35287747

كيفية تغيير لون الزر الخلفي في رد فعل تدفق جهاز التوجيه الأصلي؟

أنا أحاول backButtonBarStyle لكن لا أعمل ... لا أستطيع العثور على أي حل. tnx لمساعدتكم

<Scene key="app"  navigationBarStyle={{backgroundColor: '#1e2226',borderBottomColor:"#1e2226"}}  titleStyle={{color : "#FFF"}}>
    <Scene  key="welcome" component={LauchContainer} title="Welcome" />
    <Scene key="ProductDetail"  backButtonBarStyle={{color : "#FFF"}} component={ProductDetail} />
  </Scene>

استخدم barButtonTextStyle و barButtonIconStyle مثل الأنماط التالية.

barButtonTextStyle: {
    color:'#F16B6F'
},
barButtonIconStyle: {
    tintColor:'#F16B6F'
},

berkayk الذي لم ينجح بالنسبة لي. اضطررت إلى استخدام backButtonTextStyle لتغيير لون النص.

تأكد من أنك تنظر إلى API_CONFIGURATION.md الخاص بالإصدار المثبت لديك ، على سبيل المثال

https://github.com/aksonov/react-native-router-flux/blob/3.30.1/docs/API_CONFIGURATION.md

joelcloralt هل من طريقة

@ robtg4 يعتمد على

مرحبًا ، هل هناك أي طريقة لتصميم (تغيير حجم ، تحديدًا) navigationBarBackgroundImage؟

هل توجد طريقة لتغيير لون زر القائمة؟

انظر مستندات API كما هو مذكور أعلاه

يمكنك تغيير الصورة بنعم ، ولكن يبدو أنه لا توجد طريقة لتغيير اللون من اللون الأزرق الافتراضي. يغير barButtonIconStyle={{ tintColor: '#fff' }} زر الرجوع للخلف فقط.

هل يمكنني إزالة زر الرجوع فقط؟

يبدو أنه إذا قمت بتعريف navigationBarStyle بناءً على الحالة وتغيرت الحالة ، فلن يتم تحديث الشريط. إذا أضفت مفتاحًا إلى <Router> وقمت بتحديث المفتاح ، فيمكنني فرض تغيير ، لكن هذا يبدو سيئًا. هل هناك طريقة أفضل؟

أهلا،
"عناصر Navbar"

اريد صورة في العنوان وليس النص. لذلك ، عندما أقوم بإضافة صورة باستخدام خاصية navigationBarTitleImage ، فإنها ستنتقل إلى الزاوية اليسرى العليا. وحاولت أكثر للوصول إلى المركز باستخدام خاصية navigationBarTitleImageStyle ، تم إصلاح الصورة ولكن الرموز اليمنى واليسرى غير مرئية أو تفقد مكانها الأصلي.

لذا ، أحصل على الحل المناسب من فضلك.

HubMahesh هل يمكنك نشر الرمز الذي استخدمته في navigationBarTitleImage؟

import React from 'react'
import { Actions, Scene, StyleSheet } from 'react-native-router-flux'

const scenes = Actions.create(

    <Scene key="app" navigationBarStyle={{ backgroundColor: '#db342e' }}>
        <Scene key="drawer" component={NavigationDrawerComponentWrapper} open={false} >
            <Scene key="requiredBecauseOfDrawer">
                            <Scene key . . . />
                            //Scenes
            </Scene>
        </Scene>
    </Scene>
)

لا يمكن تلوين شريط التنقل الرجاء مساعدة شخص ما!

حتى أكون واضحًا إذا كان لدي بعض النص كزر أيمن على شريط التنقل ، لا يمكنني تغيير لونه ، أليس كذلك؟
لماذا يعمل barButtonIconStyle بينما لا يعمل barButtonTextStyle؟

أرفقت الصورة وهنا الكود الخاص بي:

جهاز التوجيه
sceneStyle = {styles.sceneStyle}
backButtonTextStyle = {styles.backButtonTextStyle}
barButtonIconStyle = {styles.barButtonIconStyle}

أنماط const = {
نمط المشهد: {
المساحة العلوية: 65
} ،
backButtonTextStyle: {
اللون: "# 2227b7"
} ،
barButtonIconStyle: {
اللون: "# 2227b7"
}
} ؛

@ brownmagik352 - ما تبحث عنه هو rightButtonTextStyle التي ستفعل ذلك.

sicdigital شكرا

لذلك حصلني barButtonIconStyle & rightButtonTextStyle على ما كنت أبحث عنه:

مرحبا يا شباب!

هل من الممكن تعيين أنماط NavBar في مكون يسمى Scene ، لا في إحدى سمات Scene Tag في Router Tag؟

aksonov هل من الممكن تغيير الخط في عنوان شريط التنقل. لقد حاولت بالفعل

  <Router titleStyle={{ color: 'red', fontFamily: "pfencoresanspro_book" }} headerTitleStyle={{ color: 'blue', fontFamily: "pfencoresanspro_book" }}>

لكنها لا تعمل

titleStyle يناسبني بالتأكيد مع الإصدار 4. إذا لم ينجح الأمر ، فيرجى إنشاء إصدار منفصل للإصدار v4 وإعطائي رابطًا للمثال المستنسخ والمعدّل حتى أتمكن من إعادة إنتاج المشكلة.

يبدو أن هناك مشكلة في React Native كما هو مذكور هنا.
https://github.com/react-community/react-navigation/issues/542#issuecomment -283663786

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

تمكنت من إصلاحه باستخدام fontWeight: "100" كما هو مذكور في التعليق. كان الخط الذي كنت أستخدمه بتنسيق .otf وطبيعي لذا لم يكن RN قادرًا على تحويله إلى خط غامق

أنا أستخدم React-native-router-flux 4.0.0-beta.17 لمشروع التعلم الخاص بي. أحتاج إلى تخصيص الرأس. على سبيل المثال ، لون الخلفية ، محاذاة العنوان ، إلخ. أين يمكنني العثور على مستند شامل؟

sicdigital مرحبًا هناك ، أين يمكنني العثور على مستند شامل حول جميع الدعائم؟

هل هناك طريقة لتعطيل النص الديناميكي في الرأس؟ عندما يسمح المستخدم بنص ديناميكي ، يمكنني تعطيل هذا في المشاهد ، لكن لا يمكنني ذلك في العنوان. أتوقع أن يتم تطبيق allowFontScaling={false} على نص الرأس.

فقط لتوضيح كل شيء.
لقد صممت كل شيء في الرأس بهذه الطريقة:

navigationBarStyle = {styles.navBar}
titleStyle = {styles.navBarTitle}
barButtonTextStyle = {styles.barButtonTextStyle}
barButtonIconStyle = {styles.barButtonIconStyle}
sceneStyle = {styles.routerScene}
rightButtonStyle = {styles.rightButton}
rightButtonTextStyle = {styles.rightButtonText}
tintColor = 'أبيض'
headerBackTitle = {'Tilbage'}
>

والأنماط:

أنماط const = {
نافبار: {
لون الخلفية: "# ff8c00" ،
الارتفاع: 70
} ،
navBarTitle: {
اللون: "#FFFFFF" ،
حجم الخط: 20
} ،
barButtonTextStyle: {
لون احمر'
} ،
barButtonIconStyle: {
اللون: أبيض
} ،
routerScene: {
الحشو أعلى: 80 ،
} ،
الزر الايمن: {
الهامش الأعلى: 5 ،
يمين: 5 ،
لون الخلفية: "أبيض" ،
راديوس: 5 ،
عرض الحدود: 1 ،
لون الحدود: "# 00b8ff"
} ،
rightButtonText: {
اللون: "# 00b8ff"

}

`} ؛

"
هكذا تبدو

يجب أن نكون قادرين على تمرير أحد مكونات جهاز التوجيه لـ navbar ، IMO. أرغب في جعل الخلفية متدرجة (تستخدم حاليًا لون خلفية شفافة مع مكون أساسي على المشهد لتقليد المظهر الذي نرغب فيه.

أي طريقة لقتل الحدود السفلية للنافبار؟ هل يمكنني إزالته أو جعله بنفس لون التنقل.

هل كنت قادرًا على إصلاح هذا؟

حصلت عليه للعمل مع الدعائم التالية:

أي طريقة لقتل الحدود السفلية للنافبار؟ هل يمكنني إزالته أو جعله بنفس لون التنقل.

هل كنت قادرًا على إصلاح هذا؟

أبحث أيضًا عن الدعامة التي تسمح لي بتغيير لون الحد السفلي