Question

我试图制作一个带有2个按钮的主菜单，用于选择应用程序的选项，但是最后2个touchableoppacities的按钮出现Device: (356:41) undefined is not an object (evaluating '_this3.props.navigation.navigate')错误。你能帮助我吗？我现在只想使其适用于单个按钮。我从发布的图标代码中删除了图标代码以减小代码大小


    class PersonHomeScreen extends React.Component {
      static navigationOptions = {
        title: 'Person',
      };
      render() {
        return (
          <View style={{alignItems: 'flex-start', justifyContent: 'center', padding: 10}}>
            <TouchableOpacity
              onPress={()=>this.props.navigation.navigate('PersonBills')}
            >
              <Text style={styles.optionTitle}> Bills </Text>
              <View
                style={{
                  borderBottomColor: 'black',
                  borderBottomWidth: 1,
                  width: 280
                }}
              />
            </TouchableOpacity>
          </View>
        );
      }
    }


    class ProfileScreen extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <Text> Profile Tab </Text>
          </View>
        );
      }
    }


    class PersonBillsScreen extends React.Component {
      static navigationOptions = {
        title: 'Person Bills',
      };
      render() {
        return (
          <View style={styles.container}>
            <Text> Bills Tab </Text>
          </View>
        );
      }
    }
    const PersonStack = createStackNavigator({
      PersonHome: { screen: PersonHomeScreen },
      PersonBills: { screen: PersonBillsScreen },
    });

    const PersonTab = createBottomTabNavigator({
      Home: {
        screen: PersonStack,
        },
      Profile: {
        screen: ProfileScreen
        }
    },
    {
          defaultNavigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) =>
              getTabBarIcon(navigation, focused, tintColor),
          }),
      tabBarOptions:{
        inactiveTintColor: '#A9E2F3',
        activeTintColor: '#0489B1'
      },
    }
    );

    const PersonTabConst = createAppContainer(PersonTab);

    export default class MainScreen extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <TouchableOpacity onPress={()=>this.props.navigation.navigate('PersonHome')}>
              <Text> Person Menu </Text>
            </TouchableOpacity>
          </View>
        );
      }
    }

Answer 1

这是否仅在MainScreen或PersonHomeScreen中发生？如果MainScreen在任何导航器中均未定义为屏幕，而是将其用作另一个组件/屏幕的内部组件，则this.props.navigation将是未定义的。在这种情况下，您将需要明确地将导航作为道具

<MainScreen navigation={this.props.navigation} ... />

我无法编写代码来在2个类之间进行导航

1 个答案: