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

我正在尝试构建一个包含4个按钮的应用程序，每个按钮都会显示一个新屏幕，但每当我尝试单击任何按钮时，它都会显示

undefined不是一个对象（评估“\u this2.props.navigation.navigate”）
onPress Buttons.js:21:57

。当我点击

flood

按钮时，它应该导航到flood页面，其中只显示文本

flood

。我是新手，不想写干净的模块化代码。什么是好的目录结构

目录结构- 错误-

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

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

export default createAppContainer(Navigator);

从'react native'导入{文本、视图、样式表、状态栏}；
从“/src/components/SubmitButton”导入SubmitButton；
从“react native”导入{YellowBox}；
ignoreWarnings（['Warning:isMounted（…）已弃用，'Module RCTImageLoader']）；
从“/Navigator”导入导航器；
从“/”按钮导入按钮
导出默认类Indra扩展组件{
render（）{
返回(
);
}
}
`Navigator.js`
从“react navigation”导入{createStackNavigator，createAppContainer}；
从“/src/screens/Flood”导入洪水；
从“/src/screens/Rain”导入雨水；
const Navigator=createStackNavigator({
泛洪：{屏幕：泛洪}，
雨：{screen:Rain}，
});
const NavigatorApp=createAppContainer（Navigator）；
导出默认NavigatorApp；
Buttons.js
从“/src/screens/Flood”导入洪水；
从“/src/screens/Rain”导入雨水；
进口{
看法
按钮
}从“反应本机”；
导出默认类按钮扩展组件{
render（）{
返回(
this.props.navigation.navigate（'Flood'）}
颜色=‘蓝色’
/>
this.props.navigation.navigate（'Rain'）}
颜色=‘红色’
/>
);
}
}
Flood.js
从“React”导入React，{Component}；
进口{
看法
样式表，
文本，
按钮
警觉的，
}从“反应本机”；
导出默认类泛洪扩展组件{
render（）{
onPressFlood=（）=>{
警报。警报（“洪水”）；
}
返回(
泛滥
);
}
}

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;

从

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

---

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;

从

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

---

您正试图将导航道具

此.props.navigation

传递给按钮组件，但导航道具不存在。

---

this.props.navigation

只能用于堆栈导航器（navigator.js）中的屏幕和组件。因此，您可以在

Flood

或

Rain

屏幕中使用

this.props.navigation

。

您正试图将导航道具

this.props.navigation

传递给按钮组件，但那里不存在导航道具。

---

this.props.navigation

只能用于堆栈导航器（navigator.js）中的屏幕和组件。因此，您可以在

Flood

或

Rain

屏幕中使用

this.props.navigation

。

它不起作用，因为

Indra

不是导航的一部分。它不起作用，因为

Indra

不是导航的一部分。非常感谢。成功了。RN项目的理想目录结构是什么？为什么之前它不工作？你能解释一下吗？导航道具会传递给使用react navigation的组件，如果该组件不是它的一部分，它将不会得到该道具，这就是为什么你没有定义。非常感谢。成功了。RN项目的理想目录结构是什么？为什么之前它不工作？你能解释一下吗？导航道具被传递给使用react navigation的组件，如果组件不是它的一部分，它将不会得到该道具，这就是为什么你没有定义。