javascript - React Native 导航中的单独导航

Question

我目前正在研究如何重用在多个屏幕的自己的类中声明的导航，或者以另一种方式放置它:如果我的方法在 react 方面不聪明，是否有另一种更好的方法来创建在多个屏幕上重复使用的导航？

每当我尝试单击导航中的按钮时，都会收到错误“未定义不是对象(正在评估 _this2.props.navigation.navigate)。所以我想我错过了有关 this.props 的一些内容Navigation.js。

我正在使用react-navigation，因为SO和react-native文档中都推荐它作为可行的方法。

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 />;
    }
}

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;

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;

Answer 1

您的 Navigation 组件不会自动从 HomeScreen 继承 navigation 属性，因为它只是一个子组件(它没有在像 HomeScreen 一样的堆栈导航器)。因此，您需要将导航作为 prop 传递给 HomeScreen JSX 中的 Navigation 组件。

//HomeScreen.js

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