我有一个排行榜,它调用一个组件并将数据传递给它,如下所示:
_renderItem =({item}) => (
<childComponent
key={item._id}
id={item._id}
name={item.name}
/>
);
在childComponent中我尝试这样做:
<TouchableOpacity onPress={() => this.props.navigation.navigate("Profile", { id: this.props.id})} >
<View>
<Right>
{arrowIcon}
</Right>
</View>
</TouchableOpacity>
我希望它会转到配置文件页面并根据传递给它的id获取正确的数据。问题是,当我单击箭头转到配置文件页面时,我收到错误无法读取属性'未定义的导航。我已经将排行榜和childComponent放在我的HomeDrawerrRoutes.js和MainStackRouter.js中。任何帮助都会很棒,谢谢。
答案 0 :(得分:18)
对此有一个简单的解决方案,
使用withNavigation
。这是一个更高阶的组件,它将导航道具传递到包装的组件中。
子组件示例
import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';
class ChildComponent extends React.Component {
render() {
<View
onPress = {()=> this.props.navigation.navigate('NewComponent')}>
... logic
</View>
}
}
// withNavigation returns a component that wraps ChildComponent and passes in the
// navigation prop
export default withNavigation(ChildComponent);
了解更多详细信息:https://reactnavigation.org/docs/en/connecting-navigation-prop.html
答案 1 :(得分:6)
这是一个3页的例子,展示了如何将navigate
函数传递给子组件,以及如何自定义从StackNavigator中发送到屏幕的道具
// subcomponent ... receives navigate from parent
const Child = (props) => {
return (
<TouchableOpacity
onPress={() => props.navigate(props.destination) }>
<Text>{props.text}>>></Text>
</TouchableOpacity>
);
}
// receives navigation from StackNavigator
const PageOne = (props) => {
return (
<View>
<Text>Page One</Text>
<Child
navigate={props.navigation.navigate}
destination="pagetwo" text="To page 2"/>
</View>
)
}
// receives custom props AND navigate inside StackNavigator
const PageTwo = (props) => (
<View>
<Text>{props.text}</Text>
<Child
navigate={props.navigation.navigate}
destination="pagethree" text="To page 3"/>
</View>
);
// receives ONLY custom props (no nav sent) inside StackNAvigator
const PageThree = (props) => <View><Text>{props.text}</Text></View>
export default App = StackNavigator({
pageone: {
screen: PageOne, navigationOptions: { title: "One" } },
pagetwo: {
screen: (navigation) => <PageTwo {...navigation} text="Page Deux" />,
navigationOptions: { title: "Two" }
},
pagethree: {
screen: () => <PageThree text="Page III" />,
navigationOptions: { title: "Three" }
},
});
答案 2 :(得分:1)
由于某些原因,如果您不想与Navigation一起使用,以下解决方案也可以使用。您只需将导航作为对子组件的支持即可。
例如:
export default class ParentComponent extends React.Component {
render() {
return (
<View>
<ChildComponent navigation={this.props.navigation} />
</View>
);
}
}
在子组件中:
const ChildComponent = (props) => {
return (
<View>
<TouchableOpacity
onPress={() => props.navigation.navigate('Wherever you want to navigate')}
/>
</View>
);
};
export default ChildComponent;
答案 3 :(得分:0)
{5}中引入了useNavigation
钩子:
import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
export function ChildComponent() => {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}