我正在尝试从bottomnavigator打开模式,正在关注本教程-https://snack.expo.io/SyJKMkFUM 我正在使用react-navigation -3.0.9
这是我的app.js App类扩展了React.Component {
renderItem = (route, index) => {
const {
navigation,
jumpToIndex,
} = this.props;
const isCapture = route.routeName === 'Capture';
const focused = index === navigation.state.index;
return (
<TouchableWithoutFeedback
key={route.key}
onPress={() => isCapture ? this.props.navigation.navigate('CaptureModal') : jumpToIndex(index)}
>
<View >
<Text >{route.routeName}</Text>
</View>
</TouchableWithoutFeedback>
);
};
render() {
const {
navigation,
} = this.props;
const {
routes,} = navigation.state;
return (
<View style={styles.container}>
{routes && routes.map(this.renderItem)}
</View>
);}}
const Screen = (props) => (
<View >
<Text>{props.title} Screen</Text>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
const TabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen
},
Link: {
screen: LinksScreen
},
settings: {
screen: View,
},
});
const CaptureStack = createStackNavigator({
Capture: {
screen: (props) => <Screen title="Capture" {...props} />,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Capture',
headerLeft: (
<Button
title="Back"
onPress={() => navigation.goBack(null)}
/>),}),},})
const RootStack1 = createStackNavigator({
Main: {
screen: TabNavigator,
},
CaptureModal: {
screen: CaptureStack,
navigationOptions: {
gesturesEnabled: false,
},
},
}, {
headerMode: 'none',
mode: 'modal',
});
const AppNavigator = createAppContainer(RootStack1); 导出默认的AppNavigator;
谁能解释这是怎么回事?教程使用1.0.0时可能是路由版本问题。
答案 0 :(得分:1)
如果有人在这里闲逛,我确实解决了我的问题-
我的目标->
点击主屏幕->选项卡活动->点击任意标签新屏幕
在我的app.js中,我创建了如下导航-
const TabNavigator = createBottomTabNavigator({
HomeScreen: {
screen: HomeScreen
},
LinksScreen: {
screen: LinksScreen
},
LoginScreen: {
screen: SurveyScreen,
},
},
{
initialRouteName : 'HomeScreen' ,
});
const RootStack1 = createStackNavigator({
TabNavigator: {
screen: TabNavigator,
},
CaptureModal: {
screen: LoginScreen,
navigationOptions: {
gesturesEnabled: false,
},
},
}, {
headerMode: 'none',
mode: 'modal',
headerLeft: null
});
const mainStack = createStackNavigator({
InsideApp: {
screen: MainScreen,
},
StartScreen: {
screen: RootStack1,
},
} ,{
headerMode: 'none',
headerLeft: null
},);
const AppNavigator = createAppContainer(mainStack);
export default AppNavigator;
现在,单击第三个选项卡(SurveyScreen)会弹出“我的模态”屏幕,以实现在SurveyScreen内,我要做的就是覆盖didmount功能并从那里打开模态-
componentDidMount() {
console.log('didmount called.');
this.props.navigation.navigate('CaptureModal')
}
对于从模式到选项卡活动的后退导航,我使用了stackreset-
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'TabNavigator' })],
});
然后单击后退-
onPress={ () => this.props.navigation.dispatch(resetAction)