Masalah Navigasi Reaksi: stacknavigator

Saya mencoba berupaya membuat navigator laci menggunakan tutorial yang sangat bagus ini /demo

Masalahnya adalah meskipun kode ini berfungsi dan saya dapat menelusuri semua layar di stacknavigator saya:

const navigator = StackNavigator({
  home: { screen: Home },
  signup: { screen: SignUpStep },
  login: { screen: Login },
  selectTeachers: { screen: SelectTeachers },
  dashboard: { screen: Dashboard },
},
{
  headerMode: 'float',
  navigationOptions: {
    headerStyle: { backgroundColor: '#E73536' },
    title: 'You are not logged in',
    headerTintColor: 'white'
  }
});

export default navigator;

Tetapi ketika saya mencoba memasukkan, sebagai langkah pertama, menggabungkan adegan login ke dalam tumpukan login dan kemudian menjadikannya sebagai layar di const lain, itu tidak berhasil:

const LoginStack = StackNavigator({
  home: { screen: Home },
  signup: { screen: SignUpStep },
  login: { screen: Login },
  selectTeachers: { screen: SelectTeachers },
  dashboard: { screen: Dashboard },
},
{
  headerMode: 'float',
  navigationOptions: {
    headerStyle: { backgroundColor: '#E73536' },
    title: 'You are not logged in',
    headerTintColor: 'white'
  }
});

const navigator = StackNavigator({
  loginStack: { screen: LoginStack },
  //drawerStack: { screen: DrawerNavigation }
}, {
  // Default config for all screens
  headerMode: 'none',
  title: 'Main',
  initialRouteName: 'loginStack'
});
export default navigator;

inilah kesalahan yang saya dapatkan:

masukkan deskripsi gambar di sini


react-native react-navigation
person Sam Rao    schedule 13.01.2018    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Tautan yang Anda bawa menyebarkan pendekatan yang salah.

Saya menulis komentar di sana,

Meletakkan laci di bawah StackNavigation adalah ide buruk dan tidak sesuai dengan panduan desain mana pun. Di iOS, tindakan seret untuk membuka diduplikasi dengan tindakan kembali di navigasi. Di Android, Anda tidak dapat menemukan aplikasi dari Google yang menggunakan pendekatan ini. Laci harus menutupi StackNavigator dari luar.

Anda perlu mengubah StackNavigator kedua menjadi DrawerNavigator. Dan lihat dokumen 'navigasi reaksi' atau contoh untuk DrawerNavigator.

person Bright Lee    schedule 15.01.2018
comment
navigasi laci dikomentari dan karenanya tidak aktif. Kekhawatiran saya adalah const navigator = StackNavigator({ loginStack: { screen: LoginStack }, tidak berfungsi. Tapi seharusnya begitu. Saya hanya mereferensikan satu stacknavigator ke dalam yang lain. - person Sam Rao; 17.01.2018
comment
@SamRao Bisakah Anda menggambar beberapa hirachky yang ingin Anda arsipkan? Kalau begitu saya mungkin bisa memberikan beberapa nasihat. - person Bright Lee; 17.01.2018
comment
@SamRao Ngomong-ngomong, saya membuat sampel yang berfungsi untuk Anda. snack.expo.io/rJIKh61Sf - person Bright Lee; 19.01.2018