web-dev-qa-db-ja.com

反応ネイティブドロワートグルが機能していません

DrawerNavigatorはstackNavigatorにあります。

ヘッダーをnoneに設定し、ボタンを押したときにヘッダー部分が機能するようにしたい。

私は次のコードを書きました。

this.props.navigation.dispatch（DrawerActions.toggleDrawer（））;

エラーは発生しません。しかし、それは何もしません。

ナビゲーターコードは次のようになります。

navigator.js

const MainScene = createStackNavigator({
 MainTab: {screen: MainTab},
 OtherScene: {screen: OtherScene}
},{...})

const OtherScene: createStackNavigator({
 DrawerScene: {screen: DrawerScene}
},{...})

const DrawerScene = createDrawerNavigator({
 Page1: {screen: Page1},
 Page2: {screen: Page2},
},{...})

Header.js

_sideMenu() {
 this.props.navigation.dispatch(DrawerActions.toggleDrawer());
}

render() {
  return (
   ...
   <TouchableOpacity 
    onPress={() => this._sideMenu()}>
    <Image ... />
   </TouchableOpacity>
   ...
  )
 }

Page1とpage2の両方に、直接書き込まれたヘッダーが含まれています。

Page1.js

render() {
 return(
  <View>
   <Header navigation={this.props.navigation} />
   ...
  </View>
 )
}
react-nativereact-navigationreact-native-ios
5
Backkom

これに対する1つの解決策は、stackNavigatorを次のようにdrawerNavigation内に配置することです。

const MainScene = createStackNavigator({
 MainTab: {screen: MainTab},
 OtherScene: {screen: OtherScene}
},{...})

const OtherScene: createStackNavigator({
 SomeOtherScene: {screen: SomeOtherScene} // remove the drawer from here
},{...})

const DrawerScene = createDrawerNavigator({
 Page1: {screen: Page1},
 Page2: {screen: Page2},
 MainScene: {
     screen: MainScene, 
     navigationOptions: {
         drawerLabel: () => null
    }},
 OtherScene: {
     screen: OtherScene, 
     navigationOptions: {
         drawerLabel: () => null
    }},
},{initialRoute: "MainScene"})

このようにして、open/close/tokenDrawer関数が未定義であるという問題が発生することはなく、次のように使用することもできます。this.props.navigation.toggleDrawer（）;

「MainScene」と「OtherScene」をドロワーアイテムに表示したくない場合は、drawerLabelsにnullを返します。

4
needsleep

「react-navigation」からこのインポート{DrawerActions}を試してください。

this.props.navigation.dispatch（DrawerActions.openDrawer（））;

this.props.navigation.dispatch（DrawerActions.closeDrawer（））;

3
Barcode HJ