在“MaterialTopTabNavigator”选项卡中使用“StackNavigator”。 （反应原生 + 博览会）

Question

My application allows my users to move with a simple slide of a finger from one tab to another thanks to "MaterialTopTabNavigator". I would like to be able to propose also on some tabs redirection buttons using "StackNavigator". I don't understand how to interlock one into the other without breaking everything. can you give me a simple example? it will be of great help to me.

you can run this example on https://snack.expo.io/ : as you can see, the "edit profile" button does not work...

App.js ->

import React from 'react';  
import {StyleSheet, Text, View, Button, TouchableOpacity} from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import Icon from "react-native-vector-icons/Ionicons";
import IntraAppNavigation from "./navigator"

class HomeScreen extends React.Component {  
 goToEdit = () => this.props.navigation.navigate('EditProfil')

 render() {  
return (  
    <View style={styles.container}>  
      <Text>Home Screen</Text>  
        <TouchableOpacity style={styles.buttons} onPress={this.goToEdit}>
          <Text style={styles.button}>Edite profil</Text>
      </TouchableOpacity>
    </View>  
 );  
}  
}  
class MapScreen extends React.Component {  
render() {  
return (  
    <View style={styles.container}>  
      <Text>Map Screen</Text>  
    </View>  
);  
}  
}  
class SettingsScreen extends React.Component {  
render() {  
    return (  
        <View style={styles.container}>  
            <Text>Settings Screen</Text>  
        </View>  
    );  
    }  
    }  
    const styles = StyleSheet.create({  
container: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center'  
},  
button: {
    color: 'blue',
    textDecorationLine: 'underline'
}
});  

const AppNavigator = createMaterialTopTabNavigator(
 {
Home: { screen: HomeScreen },
Map: { screen: MapScreen },
Settings: { screen: SettingsScreen }
},
{
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
  activeTintColor: 'green',
  inactiveTintColor: 'white',
  style: {
    backgroundColor: 'black',
  },
  labelStyle: {
    textAlign: 'center',
  },
  indicatorStyle: {
    borderBottomColor: 'green',
    borderBottomWidth: 2,
  },
},
});

export default createAppContainer(AppNavigator); 

navigator.js ->

import { createStackNavigator } from 'react-navigation-stack'
import EditProfil from './EditProfil'

const IntraAppNavigation = createStackNavigator(
 {
  Edit: { screen: EditProfil}
 },
 {
   initialRouteName: 'Edit',
   headerMode: 'none'
 }
 )

 export default IntraAppNavigation

EditProfil.js ->

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

export default class EditProfil extends React.Component {
render () {
 return (  
    <View style={styles.container}>  
      <Text>Edit Screen</Text>  
    </View>  
);  
}
}

const styles = StyleSheet.create({
container: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center'  
}
})

thanks.

Answer 1

import { createStackNavigator } from 'react-navigation-stack'
import EditProfil from './EditProfil'

const IntraAppNavigation = createStackNavigator(
 {
  home: { screen: HomeScreen}
  EditProfil: { screen:  EditProfil}
 },
 {
   initialRouteName: 'home',
   headerMode: 'none'
 }
 )

 export default IntraAppNavigation

and

const AppNavigator = createMaterialTopTabNavigator(
 {
Home: { screen: IntraAppNavigation },
Map: { screen: MapScreen },
Settings: { screen: SettingsScreen }
},
{
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
  activeTintColor: 'green',
  inactiveTintColor: 'white',
  style: {
    backgroundColor: 'black',
  },
  labelStyle: {
    textAlign: 'center',
  },
  indicatorStyle: {
    borderBottomColor: 'green',
    borderBottomWidth: 2,
  },
},
});

export default createAppContainer(AppNavigator); 

Might need a little tweaking but should give you a good starting base