Javascript 本地导航中的独立导航

我目前正在研究如何在多个屏幕上重用在自己的类中声明的导航，或者用另一种方式：如果我的方法不聪明，那么有没有其他更好的方法来创建在多个屏幕上重用的导航

每当我试图点击导航中的一个按钮时，就会出现一个错误“undefined不是一个对象（评估_this2.props.navigation.navigate）。所以我想我在navigation.js中缺少了一些关于this.props的信息

我之所以使用react导航，是因为在SO和react本机文档中建议使用它

App.js

import React from 'react';
import {createStackNavigator} from 'react-navigation';

import HomeScreen from './screens/home/HomeScreen'
import ProfileScreen from './screens/profile/ProfileScreen'
import SettingsScreen from './screens/settings/SettingsScreen'

const RootStack = createStackNavigator(
    {
        Home: HomeScreen,
        Profile: ProfileScreen,
        Settings: SettingsScreen,
    },
    {
        initialRouteName: 'Home',
    }
);

export default class App extends React.Component {
    render() {
         return <RootStack />;
    }
}

从“React”导入React；
从“反应导航”导入{createStackNavigator}；
从“./screens/home/HomeScreen”导入主屏幕
从“./screens/profile/ProfileScreen”导入ProfileScreen
从“./screens/settings/SettingsScreen”导入设置屏幕
const RootStack=createStackNavigator(
{
主页：主屏幕，
Profile:ProfileScreen，
设置：设置屏幕，
},
{
initialRouteName:“主页”，
}
);
导出默认类App扩展React.Component{
render（）{
回来
}
}

Navigation.js-包含所有屏幕的计划导航

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

class Navigation extends React.Component {

render() {
    return (
        <View style={navigationStyles.footerWrapper}>
            <View style={navigationStyles.footer}>

                <TouchableOpacity style={navigationStyles.footerItem}
                                  onPress={() => this.props.navigation.navigate('Home')}>
                    <Text style={navigationStyles.placeholderIcon}/>
                </TouchableOpacity>

                <TouchableOpacity style={navigationStyles.footerItem}
                                  onPress={() => this.props.navigation.navigate('Profile')}>
                    <Text style={navigationStyles.placeholderIcon}/>
                </TouchableOpacity>

                <TouchableOpacity style={navigationStyles.footerItem}
                                  onPress={() => this.props.navigation.navigate('Settings')}>
                    <Text style={navigationStyles.placeholderIcon}/>
                </TouchableOpacity>

            </View>
        </View>
    );
}
}

const navigationStyles = StyleSheet.create({
    //
});

module.exports = Navigation;

从“React”导入React；
从“react native”导入{样式表、视图、TouchableOpacity、文本}；
类导航扩展了React.Component{
render（）{
返回(
this.props.navigation.navigate（'Home'）}>
this.props.navigation.navigate（'Profile'）}>
this.props.navigation.navigate（'Settings'）}>
);
}
}
const navigationStyles=StyleSheet.create({
//
});
module.exports=导航；

HomeScreen.js-应包含导航但在onPress事件触发时显示错误的屏幕

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

import styles from '../../common/customStyleSheet'
import Navigation from '../../components/navigation/Navigation';


class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
        header: null,
};

render() {

    const {navigate} = this.props.navigation;

    return (
        <View style={styles.container}>
            <Text style={homeScreenStyles.paddingMedium}>HomeScreen.</Text>
            <Navigation/>
        </View>
    );
}
}

const homeScreenStyles = StyleSheet.create({
    paddingMedium: {
        paddingTop: 200,
    },
});

module.exports = HomeScreen;

从“React”导入React；
从“react native”导入{样式表、视图、TouchableOpacity、文本}；
从“../../common/customStyleSheet”导入样式
从“../../components/Navigation/Navigation”导入导航；
类主屏幕扩展了React.Component{
静态导航选项={
标题:"家",，
标题：null，
};
render（）{
const{navigate}=this.props.navigation；
返回(
主屏幕。
);
}
}
const homeScreenStyles=StyleSheet.create({
填充介质：{
paddingTop:200，
},
});
module.exports=主屏幕；

您的

导航

组件不会自动从

主屏幕

继承

导航

道具，因为它只是一个子组件（不像

主屏幕

那样在堆栈导航器中定义）。因此，您需要将导航作为道具传递给主屏幕JSX中的

导航组件

//HomeScreen.js

render() {
  return (
      <View style={styles.container}>
          <Text style={homeScreenStyles.paddingMedium}>HomeScreen.</Text>
          <Navigation navigation={this.props.navigation}/>
      </View>
  );
}

render（）{
返回(
主屏幕。
);
}
谢谢！我会将您的答案标记为解决方案。