Question

我目前正在研究如何将自己的类中声明的导航重用于多个屏幕，或者以其他方式使用它：如果我的方法不够明智，那么还有另一种更好的创建方法可以在多个屏幕上重复使用的导航？

每当我尝试单击导航中的按钮时，都会收到错误消息“未定义不是对象（评估_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

您的.untrack()组件不会自动从Navigation继承navigation道具，因为它只是一个子组件（它没有像HomeScreen那样在堆栈导航器中定义是）。因此，您需要将导航作为道具传递到HomeScreen JSX中的HomeScreen组件。

// HomeScreen.js

Navigation

React Native导航中的单独导航

1 个答案: