在BottomTabNavigator上打开一个模式，单击react-native [英] Open a modal on BottomTabNavigator click react-native

问题描述

我正尝试从bottomnavigator打开一个模式，正在遵循本教程- https://snack.expo. io/SyJKMkFUM 我正在使用react-navigation -3.0.9

I was trying to open a modal from bottomnavigator , was following this tutorial - https://snack.expo.io/SyJKMkFUM I am using react-navigation -3.0.9

这是我的app.js App类扩展了React.Component {

here is my app.js class App extends 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;

const AppNavigator = createAppContainer(RootStack1); export default AppNavigator;

任何人都可以解释这是怎么回事吗?教程使用1.0.0时可能是路由版本问题.

Could anyone please explain what is wrong with this ? Could it be a routing version issue as the tutorial is using 1.0.0 .

推荐答案

如果有人在这里讨好我的实现方式，我确实解决了我的问题-

I did solve my issue if anyone is lokking here how i achieved it -

我的目标->
点击主屏幕->选项卡活动->点击任意标签新屏幕

My Goal ->
Click on Main Screen -> Tabbed Activity -> on click of any tab new screen

在我的app.js中，我创建了如下导航-

in my app.js i created navigation as follows -

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功能并从那里打开模态-

Now My Modal screen will pop up on click of third tab (SurveyScreen) , to achieve that inside surveyscreen all i had to do was override didmount function and open modal from there -

 componentDidMount() {
     console.log('didmount called.');
     this.props.navigation.navigate('CaptureModal')         
 }

对于从模式到选项卡活动的后退导航，我使用了stackreset-

For back navigation from modal to tab activity i used stackreset -

const resetAction = StackActions.reset({
 index: 0,
 actions: [NavigationActions.navigate({ routeName: 'TabNavigator' })],
});

然后单击后退-

onPress={ () => this.props.navigation.dispatch(resetAction)

这篇关于在BottomTabNavigator上打开一个模式，单击react-native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！