使用“ MaterialTopTabNavigator”标签中的“ StackNavigator”。 （本机+博览会）

Question

由于有了“ MaterialTopTabNavigator”，我的应用程序使我的用户只需用手指滑动即可从一个选项卡移动到另一个选项卡。我希望能够使用“ StackNavigator”在某些选项卡上建议重定向按钮。我不明白如何在不破坏一切的情况下将彼此联系在一起。能给我一个简单的例子吗？这将对我有很大帮助。

您可以在https://snack.expo.io/上运行此示例：如您所见，“编辑个人资料”按钮不起作用...

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

谢谢。

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

和

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); 

可能需要一些调整，但应该为您提供良好的入门基础