React native 无法读取属性'；导航'；加载App.js时未定义的评估App.js的数量

希望按钮进入另一个屏幕： 需要导航屏幕的帮助。 我不断地犯错误： 无法读取未定义的属性“导航” 评估App.js 加载App.js TypeError:无法读取未定义的属性“navigation”

import*as React from'React'；
从“react native”导入{文本、视图、样式表、图像背景、图像、按钮}；
从“expo常量”导入常量；
从“react navigation”导入{StackNavigator}；
从“./components/Books”导入书籍；
//可以从本地文件导入
//或npm中可用的任何纯javascript模块
从“react native paper”导入{Card}；
const Book=StackNavigator({
书籍：{屏幕：书籍}，
});
const{navigate}=this.props.navigation；
导出默认函数App（）{
返回(
五彩缤纷的刺激
{\n}书虫们，联合起来！{\n}{\n}
悬疑，神秘和惊悚片的作者的颜色
导航（'Books'）}
/>
);
}

在上面的代码片段中，我没有看到从条目文件返回默认的

导航器

，在React Native中默认为

App.js

我假设您刚刚开始学习React Native，因此我将为您保留所有次要细节，并引导您完成解决方案

我在

/components/Home.js

中将

App.js

文件重构为一个新的组件文件

在

App.js

中添加了一个默认堆栈

Navigator

，它有两个屏幕：主页和书籍

现在，您可以访问

主页

和

书籍

组件中的所有

导航

道具，因为它是在

App.js的Navigator变量中声明的

这里是你的代码的现场演示

//App.js
从“React”导入*作为React；
从“react native”导入{文本、视图、样式表、图像背景、图像、按钮}；
从“expo常量”导入常量；
从“react navigation”导入{StackNavigator}；
从“./components/Books”导入书籍；
从“./components/Home”导入主页
从“react native paper”导入{Card}；
const Navigator=StackNavigator({
书籍：{屏幕：书籍}，
主页：{屏幕：主页}
});
导出默认功能应用程序（道具）{
返回(
);
}

//组件/Books.js
从“React”导入React，{useState}；
从“react native”导入{样式表、SafeAreaView、按钮}；
从“反应原材料选项卡”导入材料选项卡；
康斯特图书=（道具）=>{
常量{navigation}=props
常量[selectedTab，setSelectedTab]=useState（0）；
返回(
navigation.navigate（'Home'）}
/>
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
});
导出默认书籍

//组件/Home.js
从“React”导入React
从“react native”导入{视图、文本、样式表、按钮、图像}
const Home=（道具）=>{
常量{navigation}=props
返回(
五彩缤纷的刺激
{\n}书虫们，联合起来！{\n}{\n}
悬疑，神秘和惊悚片的作者的颜色
navigation.navigate（'Books'）}
/>
)
}
导出默认主页
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
},
顶部容器：{
弹性：1，
背景颜色：“#ff914d”，
},
底部容器：{
弹性：1，
背景颜色：“#96d0e3”，
},
图像容器：{
位置：'绝对'，
宽度：“100%”，
高度：“100%”，
为内容辩护：“中心”，
对齐项目：“居中”，
},
图片：{
宽度：300，
},
标题：{
差额：24，
玛金托普：50，
尺寸：40，
fontWeight:'粗体'，
textAlign:'中心'，
fontFamily:“GillSans Italic”，
},
第段：{
差额：24，
玛金托普：0，
尺寸：20，
fontWeight:'粗体'，
textAlign:'中心'，
}
});

在上面的代码片段中，我没有看到从条目文件返回默认的

导航器

，在React Native中默认为

App.js

我假设您刚刚开始学习React Native，因此我将为您保留所有次要细节，并引导您完成解决方案

我在

/components/Home.js

中将

App.js

文件重构为一个新的组件文件

在

App.js

中添加了一个默认堆栈

Navigator

，它有两个屏幕：主页和书籍

现在，您可以访问

主页

和

书籍

组件中的所有

导航

道具，因为它是在

App.js的Navigator变量中声明的

这里是你的代码的现场演示

//App.js
从“React”导入*作为React；
从“react native”导入{文本、视图、样式表、图像背景、图像、按钮}；
从“expo常量”导入常量；
从“react navigation”导入{StackNavigator}；
从“./components/Books”导入书籍；
从“./components/Home”导入主页
从“react native paper”导入{Card}；
const Navigator=StackNavigator({
书籍：{屏幕：书籍}，
主页：{屏幕：主页}
});
导出默认功能应用程序（道具）{
返回(
);
}

//组件/Books.js
从“React”导入React，{useState}；
从“react native”导入{样式表、SafeAreaView、按钮}；
从“反应原材料选项卡”导入材料选项卡；
康斯特图书=（道具）=>{
常量{navigation}=props
常量[selectedTab，setSelectedTab]=useState（0）；
返回(
navigation.navigate（'Home'）}
/>
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
});
导出默认书籍

//组件/Home.js
从“React”导入React
导入{视图、文本、样式表、Bu