react-native undefined is not an object ('this.props.navigation.navigate') 错误

Question

我想进行如下操作

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> 
  ...
 )}

出现以下错误：

undefined is not an object ('this.props.navigation.navigate')

如何解决？

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

我要调试

Answer 1

我解决了。我已经为 Tab1 上的屏幕分隔 class。

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

我把上面的代码改成了下面这样：

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

react-native undefined is not an object ('this.props.navigation.navigate') 错误

react-native undefined is not an object ('this.props.navigation.navigate') error

react-native

react-native-ios

react-navigation