我要继续进行以下操作
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中的堆叠吗?
我要调试
答案 0 :(得分:0)
我解决了。 我已经将Tab1屏幕上的类分开了。
export default class example extends Component {
render() {
return(
<Tab1 />
)
}
}
我将上面的代码更改为以下代码:
<Tab1 navigation={this.props.navigation}/>