javascript - 在 "StackNavigator"选项卡内使用 "MaterialTopTabNavigator"。 (React-native + 博览会)

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

导航器.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); 

可能需要一些调整，但应该给你一个良好的起点