react-native undefined不是对象('this.props.navigation.navigate')错误

时间:2018-08-23 04:13:42

标签: react-native react-navigation react-native-ios

我要继续进行以下操作

StackNavigator-> TabNavigator-> StackNavigator

单击屏幕上的按钮将移至选项卡式屏幕,而单击屏幕上的按钮将移至其他表格的屏幕。

出现部件移动错误。

Navigator.js

const SignUpScene = createStackNavigator({
 SignUp: {screen: SignUp},
 }, ...

 const SigninScene = createStackNavigator({
  HomeUI: {screen: HomeUI},
  TopTab: {screen: TopTab},
  Screen1: {screen: Screen1},
  SignUpScene: {screen: SignUpScene},
 }, ...

 const HomeScene = createStackNavigator({
  SigninScene: {screen: SigninScene},
 }, ...

 export default class Navigator extends Component {
  render() {
   return(
    <HomeScene />
   );
  }
 }

HomeUI.js

render() {
 const {navigate} = this.props.navigation;
 return (
  <View>
   <Image... />
   <View>
    <TouchableOpacity
     ...
     opPress={() => navigate("TopTab")}>
     <Text> button1 </Text>
    </TouchableOpacity>
    <TouchableOpacity
     ...
     onPress={() => navigate("Screen1")}>
     <Text> button2 </Text>
    </TouchableOpacity>
   </View>
  </View>
 )}

TopTab.js

export default TopTab = createMaterialTopTabNavigator({
 Tab1: {
  screen: Tab1,
  navigationOptions: {...}
 },
 Tab2: {
  screen: Tab2,
  navigationOptions: {...}
 }
})

Tab1.js

render() {
 const {navigate} = this.props.navigation;
 return(
  ...
  <view>
   <Button
    onPress={() => navigate("SignUpScene")} />
    ...
  </View> 
  ...
 )}

发生以下错误:

  

未定义不是对象('this.props.navigation.navigate')

我该如何解决?

我可以看到堆叠在stacknavigator中的堆叠吗?

我要调试

1 个答案:

答案 0 :(得分:0)

我解决了。 我已经将Tab1屏幕上的类分开了。

export default class example extends Component {
 render() {
  return(
   <Tab1 />
  )
 }
}

我将上面的代码更改为以下代码:

<Tab1 navigation={this.props.navigation}/>