javascript - react 导航如何从自定义抽屉导航导航

Question

我正在使用 createDrawerNavigator 并在其中制作了自定义配置文件 View 。当我按下 navigate 时，我想移动到另一个屏幕。

但这给我一个错误undefined is not an object (evaluating"_this.props.navigation")。其他组件 one、two、three 工作正常。

这是我的代码:

export default class App extends Component {
  render() {

    return (
      <View style={{flex:1, marginTop:30}}>
        <AppContainer/>
      </View>
    );
  }
}

    const CustomDrawerContentComponent = (props)=> {
      return(
      <SafeAreaView style={{flex:1}}>
        <View style={{ height:100, backgroundColor: '#9FA8DA' }}>
          <Image
                style={{marginLeft:20,height:100,width:100,borderRadius:50}}
                source={require('./assets/puppy.jpg')}/>
        </View>

        <View style={{flexDirection:'row', margin:20, alignItems:'center'}}>
    //////here is where I get an error
        <TouchableOpacity
            style={{marginTop:0}}
            onPress={()=> {this.props.navigation.navigate('profile')}}>
          <Text style={{fontSize:18, fontWeight:'bold'}}>navigate</Text>
          <Image
                style={{height:12,width:12}}
                source={require('./assets/drawable-hdpi/ic_arrow_depth.png')}/>
        </TouchableOpacity>
        </View>
        <ScrollView>
          <DrawerItems {...props}/>
        </ScrollView>
      </SafeAreaView>
      )
    }

const AppDrawerNavigator = createDrawerNavigator({
    one: AppStackNavigator,
    two: BoardScreen,
    three: NotificationScreen,
  },{
    contentComponent:CustomDrawerContentComponent,
  })

const AppStackNavigator = createStackNavigator({
  profile: {
  screen: profileScreen,
  navigationOptions: {
      header: null
    },
  },
})

const StartSwitchNavigator = createSwitchNavigator(
    {
      App: AppDrawerNavigator,
    },
    {
      initialRouteName: 'App',
    }
  )

Answer 1

您的 CustomDrawerContentComponent 组件是功能组件。直接使用props.navigation代替this.props