react-native - 在子视图中导航
问题描述
我正在我的 react-native 应用程序的屏幕之间创建导航,但是我有一个问题,我有一个父视图,并且每当我尝试将导航作为子视图的道具传递时,它都会在其中呈现一个子视图,它给了我一个错误,谁能告诉我我应该如何通过它?这是我试图做的:
应用程序.js:
import React, { Component } from 'react';
import Parent from './components/Parent';
import {
createStackNavigator,
} from 'react-navigation';
const App = createStackNavigator({
Parent: { screen: Parent },
});
父组件:
import React, { Component } from 'react';
import { Text } from 'react-native';
import Child from './Child';
class Parent extends Component {
render() {
return (
<Text>Parent Component</Text>
<Child />
);
export default Parent;
子组件:
import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
class Child extends Component {
render() {
const { navigate } = this.props.navigation;
return(
<TouchableOpacity onPress={() => {props.navigation.navigate('Parent')}}>
);
export default Child;
这是错误:
undefined 不是评估 _this.props.navigation 的对象
解决方案
您需要将导航道具显式传递给<Child/>
组件
家长
<Child navigation={this.props.navigation}/>
孩子
const { navigate } = this.props.navigation;
return(
<TouchableOpacity onPress={() => {navigate('Parent')}} />
);
并在Parent中将您的 JSX 包装在<View/>
<View>
<Text>Parent Component</Text>
<Child navigation={this.props.navigation}/>
</View>
推荐阅读
- windows - 未定义和未分配的虚拟键码有什么区别?
- javascript - 返回值的数量 - REST API 角度
- c# - 每个请求创建全新的 HttpClient 是否便宜
- xml - 需要 JavaScript 代码帮助来解析 xml 响应
- rust - swagger 编辑器演示是否已过时?
- android - 应用程序在一段时间后没有响应
- c# - 在 asp .net core 3 中使用进程内托管设置请求超时
- azure-data-factory - 如何解码 html 编码的文本?
- java - 如何刷新单例类对象
- asp.net-core - Identity Server 4 - 保留返回 URL/重定向 Ui