React-native-router-flux: إزالة زر العودة من شريط التنقل

تم إنشاؤها على ٣٠ ديسمبر ٢٠١٦ · 17تعليقات · مصدر: aksonov/react-native-router-flux

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

هذا هو الكود الفعلي الخاص بي:

const scenes = Actions.create(
    <Scene key="root">
        <Scene key="login" component={LoginComponent} title="Login" initial={true} hideNavBar={true}/>
        <Scene key="tabbar" tabs={true}>
            <Scene key="feed" component={FeedComponent} title="Live orders" icon={TabIcon} initial={true}/>
            <Scene key="orders" component={OrdersComponent} title="My orders" icon={TabIcon} />
            <Scene key="wallet" component={WalletComponent} title="Wallet" icon={TabIcon} />
            <Scene key="profile" component={ProfileComponent} title="Profile" icon={TabIcon} />
        </Scene>
    </Scene>
);

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <RouterWithRedux scenes={scenes} />
            </Provider>
        );
    }
}

أي مساعدة ستكون موضع تقدير حقا!
شكرا!

مصدر

hecontreraso

التعليق الأكثر فائدة

ddolheguy شكرًا لك على إجابتك السريعة.
عملت أخيرًا بإضافة:
renderBackButton={()=>(null)}

أنا أغلق القضية الآن

hecontreraso في ٣١ ديسمبر ٢٠١٦

👍17 👎4

ال 17 كومينتر

أنت بحاجة إلى تجاوز "renderBackButton" في المشهد باستخدام وظيفة تُرجع زر الرجوع. ملاحظة: بناءً على موقفك ، قد تحتاج إلى تجاوز "renderLeftButton" بدلاً من زر الرجوع الذي له نفس الوظيفة.

const renderBackButton = () => {
    return (
        <TouchableOpacity
            onPress={() => {}}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Image
                    source={require('../assets/images/icons/[email protected]')}
                    resizeMode={'contain'}/>
                <Text>Back</Text>
            </View>
        </TouchableOpacity>
    );
};

                <Scene
                    key="editExpense"
                    renderBackButton={() => renderBackButton()}
                    component={EditExpenses} title="My View" />

ddolheguy في ٣٠ ديسمبر ٢٠١٦

🎉4 👍3

ddolheguy شكرًا لك على إجابتك السريعة.
عملت أخيرًا بإضافة:
renderBackButton={()=>(null)}

أنا أغلق القضية الآن

hecontreraso في ٣١ ديسمبر ٢٠١٦

👍17 👎4

ddolheguy شكرا لك. عملت معي.

daviscabral في ٢٤ فبراير ٢٠١٧

لا يعمل

jobrienski في ٢٨ أكتوبر ٢٠١٧

👍10

jobiwankanobi هل يمكنك إعطاء المزيد من السياق؟ هذه المشكلة أقدم من 8 أشهر + - ربما تغيرت في الإصدار الذي تجربه.

daviscabral في ٢٨ أكتوبر ٢٠١٧

لا تهتم - كنت أواجه مشكلة في عدم إظهار السهم الأيسر للخلف. لقد اكتشفت ما إذا كنت قد قمت بعمل hideNavBar على مكون الجذر ، فإن الوظيفة تعمل بالشكل الذي أريده.

jobrienski في ٢٩ أكتوبر ٢٠١٧

👍1

مهلا

أحاول القيام بذلك ، لكن زر الرجوع لا يزال يظهر للأسف.
4.0.0 بيتا 24

<Router> <Scene key="root"> <Scene key="login" component={LoginForm} title="Please Log in" /> <Scene key="employeeList" component={EmployeeList} title="Employees" renderBackButton={()=>(null)} renderLeftButton={()=>(null)} /> </Scene> </Router>

krean93 في ٥ ديسمبر ٢٠١٧

👍8 🎉2 ❤1

@ krean93 حاول إضافة tabs إلى مشهد الجذر الخاص بك ، ولا تنسَ hideTabBar .

<Router>
  <Scene key="root" tabs>
    <Scene key="login" component={LoginForm} title="Please Log in" hideTabBar />
    <Scene key="employeeList" component={EmployeeList} title="Employees" hideTabBar />
  </Scene>
</Router>

يمكنك لاحقًا دمج المشاهد الخاصة بك ، بحيث يمكن أن تؤدي قائمة الموظف إلى شاشة موظف واحد:

<Router>
  <Scene key="root" tabs>
    <Scene key="login" component={LoginForm} title="Please Log in" hideTabBar />
    <Scene key="employees">
      <Scene key="employeeList" component={EmployeeList} title="Employees" hideTabBar />
      <Scene key="employee" component={Employee} hideTabBar />
    </Scene>
  </Scene>
</Router>

pistonsky في ٢٤ ديسمبر ٢٠١٧

👍6

لقد نجح هذا بالنسبة لي مع 4.0.0-beta.24 : https://github.com/aksonov/react-native-router-flux/issues/2006#issuecomment -322423598

jtrein في ٩ يناير ٢٠١٨

👍1

pistonsky شكرا لك !!!
ما عليك سوى أن تتذكر أنه عند استخدام استدعاء الإجراءات من جهاز التوجيه الأصلي المتفاعل ، فإنك تحتاج إلى الاتصال به للموظفين.
هذا عمل لا تشوبه شائبة :)

vinipachecov في ٩ يناير ٢٠١٨

لإخفاء زر الرجوع في المشهد الأولي الخاص بي ، قمت ببساطة بإضافة خاصية "renderLeftButton" ، مروراً بعرض فارغ.

انظر أدناه للحصول على بعض التعليمات البرمجية غير المكتملة.

import { View } from "react-native";
....
...
<Scene initial={true} renderLeftButton={<View></View>}   key="timeline" component={Timeline}   />

fendorio في ١٢ يناير ٢٠١٨

👍5

لأولئك الذين يتطلعون إلى إخفاء تسمية نص زر الرجوع ، راجع https://github.com/aksonov/react-native-router-flux/issues/2219
تعيين backTitle=" " prop (مسافة في _الاقتباسات_ ؛ ليست سلسلة فارغة) يؤدي المهمة

y2k-shubham في ٢٢ فبراير ٢٠١٨

capture

gogh-zaa في ١٣ مارس ٢٠١٨

👍8 🎉1

ddolheguy شكرًا لك على إجابتك السريعة.
عملت أخيرًا بإضافة:
renderBackButton={()=>(null)}
أنا أغلق القضية الآن

وكيفية تعطيل التمرير للخلف؟

chenyu1990 في ١٩ أكتوبر ٢٠١٨

تضمين التغريدة

أنت بحاجة إلى تجاوز "renderBackButton" في المشهد باستخدام وظيفة تُرجع زر الرجوع. ملاحظة: بناءً على موقفك ، قد تحتاج إلى تجاوز "renderLeftButton" بدلاً من زر الرجوع الذي له نفس الوظيفة.

شكرا لهذه المعلومات. استخدام renderLeftButton نجح معي. فقط أتساءل ما الفرق بين استخدام renderLeftButton مقابل renderBackButton ؟ حاولت renderBackButton (مع {() => null} ووجدت أنه أزال نص زر الرجوع فقط ، لكن لم يزيل الرمز.

karlkras في ٢٦ ديسمبر ٢٠١٨

left={() => null} يعمل

bsozeroglu في ١ مايو ٢٠١٩

قالها أحدهم ، لكن مرة أخرى. hideNavBar هذا ما تريده إذا كنت لا تريد التنقل العلوي. RenderBackButton = {() => null} ولا يعمل hideTabBar ، استخدم hideNavBar.