Question

我正在尝试在本机React中实现抽屉菜单，但不确定是否做对了。这是我到目前为止的内容：

#App.js
const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
    Save: SaveScreen,
    About: AboutScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

#Homescreen.js
     static navigationOptions = {
    // headerTitle instead of title
    drawerLabel: 'Home',
    headerTitle: 

        <View style={{flex: 1, flexDirection: 'row', marginLeft: 16}}>
        <TouchableOpacity style={styles.button} onPress={()=>{this.props.navigation.openDrawer()}}>
          <Image
            source={require('../../assets/ic-hamburger.png')}
            style={{ width: 20, height: 18 }}
          />
        </TouchableOpacity>

        <Text style={styles.menuTitle}>Menu</Text>
      </View>
  };

为什么在这里未定义this.props.navigation？如何检索它，以便在单击图像时打开抽屉？

谢谢！

Answer 1

使用navigation对象尝试此操作：

static navigationOptions = ({ navigation }) => ({
// headerTitle instead of title
drawerLabel: 'Home',
headerTitle: 

    <View style={{flex: 1, flexDirection: 'row', marginLeft: 16}}>
    <TouchableOpacity style={styles.button} onPress={()=>navigation.navigate('DrawerOpen')}>
      ....
    </TouchableOpacity>
  </View>
});

回应本机抽屉未解决的问题

1 个答案: