Question

我正在尝试构建一个包含4个按钮的应用程序，每个按钮都将导致一个新屏幕，但是每当我尝试单击任何按钮时，它就会显示undefined is not an object (evaluating '_this2.props.navigation.navigate') onPress Buttons.js:21:57。当我单击flood按钮时，它应该导航到泛洪页面，其中仅显示文本flood。我是新来的反应本机任何想要编写干净和模块化的代码。一个好的目录结构应该是什么？

目录结构-https://imgur.com/a/xSb9QqT 错误-https://imgur.com/a/8u0pdKb

APP.js

import { Text, View, StyleSheet, StatusBar} from 'react-native';
import SubmitButton from "./src/components/SubmitButton";
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
import Navigator from "./Navigator";
import Buttons from "./Buttons"

export default class Indra extends Component {
  render() {
    return (
         <Buttons navigation={this.props.navigation}/>
         <Navigator /> 
         <SubmitButton />
      </View>
    );
  }
}


`Navigator.js`
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Flood from "./src/screens/Flood";
import Rain from "./src/screens/Rain";


const Navigator = createStackNavigator({
    Flood: { screen: Flood },
    Rain: { screen: Rain },

});

const NavigatorApp = createAppContainer(Navigator);
export default NavigatorApp;

Buttons.js
import Flood from "./src/screens/Flood";
import Rain from "./src/screens/Rain";
import {
    View,
    Button,
} from 'react-native';

export default class Buttons extends Component {
    render() {
        return (
            <View>
                <Button
                    title="Flood"
                    onPress={() => this.props.navigation.navigate('Flood')}
                    color = 'blue'
                />
                <Button
                    title="Rain"
                    onPress={() => this.props.navigation.navigate('Rain')}
                    color = 'red'
                />
            </View>
        );
    }
}

Flood.js
import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Text,
    Button,
    Alert,
} from 'react-native';

export default class Flood extends Component {
    render() {
        onPressFlood = () => {
            Alert.alert(" Flood ");
        }
        return (
            <View style={styles.container}>
                <Text>FLOOD</Text>
            </View>
        );
    }
}

Answer 1

Indra不属于您的导航，请将其添加到导航路径中。

import { createStackNavigator, createAppContainer } from 'react-navigation';
import Flood from "./src/screens/Flood";
import Rain from "./src/screens/Rain";
import Indra from './src/screens/Indra';

const Navigator = createStackNavigator(
{
    Flood: Flood,
    Rain: Rain,
    Indra: Indra,
},
{
    initialRouteName: 'Indra'
}
);

export default Navigator;

从Navigator删除Indra

import React, { Component } from 'react';
import { YellowBox, View } from 'react-native';
YellowBox.ignoreWarnings([
'Warning: isMounted(...) is deprecated',
'Module RCTImageLoader',
]);
import Buttons from './Buttons';

export default class Indra extends Component {
render() {
    return (
    <View>
        <Buttons navigation={this.props.navigation} />
    </View>
    );
}
}

在您的App.js

import React, {
Component
} from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Navigator from "./Navigator";

export default createAppContainer(Navigator);

Demo

Answer 2

您正在尝试将导航道具this.props.navigation传递给Buttons Component，但是导航道具在那里不存在。 this.props.navigation仅可用于堆栈导航器（Navigator.js）中的屏幕和组件。因此，您可以在this.props.navigation或Flood屏幕中使用Rain。

按钮无法导航到所需的屏幕，并显示未定义的对象错误

2 个答案: