React-native-router-flux: Hapus tombol kembali dari navbar

Dibuat pada 30 Des 2016 · 17Komentar · Sumber: aksonov/react-native-router-flux

Saya sudah mencoba banyak hal untuk menghapus panah kiri di bilah navigasi aplikasi saya. Saya memiliki adegan dengan tab, jadi saya tidak memerlukannya.
Tangkapan layar di sini

Ini adalah kode saya yang sebenarnya:

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>
        );
    }
}

Bantuan apa pun akan sangat dihargai!
Terima kasih!

Sumber

hecontreraso

Komentar yang paling membantu

@ddolheguy Terima kasih atas jawaban cepat Anda.
Akhirnya berhasil menambahkan:
renderBackButton={()=>(null)}

Saya menutup masalah sekarang

hecontreraso pada 31 Des 2016

👍17 👎4

Semua 17 komentar

Anda perlu mengganti "renderBackButton" di Scene dengan fungsi yang mengembalikan tombol kembali. CATATAN: Bergantung pada situasi Anda, Anda mungkin perlu mengganti "renderLeftButton" alih-alih tombol kembali dengan fungsi yang sama.

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 pada 30 Des 2016

🎉4 👍3

@ddolheguy Terima kasih atas jawaban cepat Anda.
Akhirnya berhasil menambahkan:
renderBackButton={()=>(null)}

Saya menutup masalah sekarang

hecontreraso pada 31 Des 2016

👍17 👎4

@ddolheguy Terima kasih. Itu berhasil untuk saya.

daviscabral pada 24 Feb 2017

Tidak berfungsi

jobrienski pada 28 Okt 2017

👍10

@jobiwankanobi dapatkah Anda memberikan lebih banyak konteks? masalah ini berumur 8 bulan+ - mungkin dalam versi yang Anda coba mungkin telah berubah.

daviscabral pada 28 Okt 2017

Sudahlah - saya mengalami kesulitan tidak menunjukkan panah kiri belakang. Saya menemukan jika saya melakukan hideNavBar pada komponen root, fungsionalitasnya berfungsi seperti yang saya inginkan.

jobrienski pada 29 Okt 2017

👍1

Hai

Saya mencoba melakukan ini, tetapi sayangnya tombol kembali masih muncul.
4.0.0-beta.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 pada 5 Des 2017

👍8 🎉2 ❤1

@krean93 Coba tambahkan tabs ke root scene Anda, dan jangan lupa tentang 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>

Nanti Anda dapat membuat sarang adegan Anda, sehingga employeeList dapat mengarah ke layar satu karyawan:

<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 pada 24 Des 2017

👍6

Ini bekerja untuk saya dengan 4.0.0-beta.24 : https://github.com/aksonov/react-native-router-flux/issues/2006#issuecomment -322423598

jtrein pada 9 Jan 2018

👍1

@pistonsky Terima kasih!!!
Hanya perlu diingat bahwa ketika Anda menggunakan panggilan untuk Tindakan dari react-native-router-flux, Anda perlu memanggilnya ke karyawan.
Itu bekerja dengan sempurna :)

vinipachecov pada 9 Jan 2018

Untuk menyembunyikan tombol kembali pada adegan awal saya, saya cukup menambahkan prop 'renderLeftButton', melewati View kosong.

Lihat di bawah untuk beberapa kode contoh yang tidak lengkap.

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

fendorio pada 12 Jan 2018

👍5

Bagi mereka yang ingin menyembunyikan label teks tombol kembali , lihat https://github.com/aksonov/react-native-router-flux/issues/2219
Menyetel backTitle=" " prop (spasi dalam _quotes_; BUKAN string kosong) berhasil

y2k-shubham pada 22 Feb 2018

capture

gogh-zaa pada 13 Mar 2018

👍8 🎉1

@ddolheguy Terima kasih atas jawaban cepat Anda.
Akhirnya berhasil menambahkan:
renderBackButton={()=>(null)}
Saya menutup masalah sekarang

dan bagaimana cara menonaktifkan swipe back?

chenyu1990 pada 19 Okt 2018

@pistonsky

Anda perlu mengganti "renderBackButton" di Scene dengan fungsi yang mengembalikan tombol kembali. CATATAN: Bergantung pada situasi Anda, Anda mungkin perlu mengganti "renderLeftButton" alih-alih tombol kembali dengan fungsi yang sama.

Terima kasih atas informasi ini. Menggunakan renderLeftButton berhasil untuk saya. Hanya ingin tahu apa perbedaan menggunakan renderLeftButton vs. renderBackButton ? Saya mencoba renderBackButton (dengan {() => null} dan ternyata hanya menghapus teks tombol kembali, tetapi bukan ikonnya.

karlkras pada 26 Des 2018

left={() => null} berfungsi

bsozeroglu pada 1 Mei 2019

Seseorang mengatakannya, tapi sekali lagi. hideNavBar inilah yang Anda inginkan jika Anda tidak menginginkan navigasi teratas. renderBackButton={()=>null} dan hideTabBar tidak berfungsi, gunakan hideNavBar.