javascript 如何将道具传递给 React Navigation 导航器内的组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50432116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass props to component inside a React Navigation navigator?
提问by James Ko
I'm trying to pass props to a component that has been wrapped through a call to create...Navigatorcall, i.e.
我正在尝试将道具传递给一个通过调用包装的组件create...Navigator，即
// Search.js
const Navigator = createMaterialTopTabNavigator({
Wines,
Stores,
Vineyards,
Restaurants
});
// Somewhere in render()...
<Navigator />
I'm trying to figure out how to pass parameters to the Wines/ Stores/ etc. components from the Searchcomponent (above). I've read the docsand apparently this can be done easily with navigation.navigateby passing in an object, but I'm not sure how to do it with this particular method. Can someone please help?
我试图找出如何将参数传递到Wines/Stores从/等部件Search（见上文）的组成部分。我已经阅读了文档，显然这可以navigation.navigate通过传入一个对象轻松完成，但我不确定如何使用此特定方法来完成。有人可以帮忙吗？
回答by bennygenel
Your example is a bit vague so I try to explain as much as I can.
你的例子有点含糊，所以我尽量解释。
There is 2 different ways to pass properties to screens (except redux implementation).
有 2 种不同的方式将属性传递给屏幕（redux 实现除外）。
1) navigateaction
1)navigate动作
You can pass parameters to navigated screen with passing paramsargument to the screen.
您可以将参数传递给导航屏幕，并将params参数传递给屏幕。
navigation.navigate({routeName, params, action, key}) OR navigation.navigate(routeName, params, action)
routeName- A destination routeName that has been registered somewhere in the app's router
params- Params to merge into the destination route
action- (advanced) The sub-action to run in the child router, if the screen is a navigator. See Actions Doc for a full list of supported actions.
key- Optional identifier of what route to navigate to. Navigate back to this route, if it already exists
navigation.navigate({routeName, params, action, key}) 或 navigation.navigate(routeName, params, action)
routeName- 已在应用程序路由器中某处注册的目的地 routeName
params- 合并到目标路由的参数
动作- （高级）在子路由器中运行的子动作，如果屏幕是导航器。有关受支持操作的完整列表，请参阅操作文档。
key- 要导航到的路线的可选标识符。导航回这条路线，如果它已经存在
Sample
样本
this.props.navigate('Profile', { name: 'Brent' })
2) screenProps
2) screenProps
You can pass a global parameter to the navigation which can be available in every screen for that navigation.
您可以将全局参数传递给导航，该参数可在该导航的每个屏幕中使用。
screenProps- Pass down extra options to child screens
screenProps- 将额外的选项传递给子屏幕
Sample
样本
const SomeStack = createStackNavigator({
// config
});
<SomeStack
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
I have created a small sample app which I am guessing you are trying to achieve.
我创建了一个小示例应用程序，我猜你正在尝试实现它。
const Tab = ({name, searchValue}) => (
<View style={styles.tabContainer}>
<Text>{name}</Text>
<Text>{`Searching: ${searchValue || '...'}`}</Text>
</View>
);
const Wines = (props) => (<Tab name="Wines Page" searchValue={props.screenProps.searchValue} />);
const Stores = (props) => (<Tab name="Stores Page" searchValue={props.screenProps.searchValue} />);
const Vineyards = (props) => (<Tab name="Vineyards Page" searchValue={props.screenProps.searchValue} />);
const Restaurants = (props) => (<Tab name="Restaurants Page" searchValue={props.screenProps.searchValue} />);
const Navigator = createMaterialTopTabNavigator({
Wines,
Stores,
Vineyards,
Restaurants
});
export default class App extends Component {
state = {
text: ''
}
changeText = (text) => {
this.setState({text})
}
clearText = () => {
this.setState({text: ''})
}
render() {
return (
<View style={styles.container}>
<SearchBar
lightTheme
value={this.state.text}
onChangeText={this.changeText}
onClearText={this.clearText}
placeholder='Type Here...' />
<Navigator screenProps={{searchValue: this.state.text}} />
</View>
);
}
}
