javascript - 如何将 Prop 传递给 React Navigation 导航器内的组件？

Question

我正在尝试将 Prop 传递给已通过调用 create...Navigator 调用包装的组件，即

// Search.js
const Navigator = createMaterialTopTabNavigator({
    Wines,
    Stores,
    Vineyards,
    Restaurants
});

// Somewhere in render()...
<Navigator />

我正在尝试弄清楚如何将参数从 Search 组件传递给 Wines/Stores/etc. 组件(以上).我有 read the docs显然这可以通过传入一个对象使用 navigation.navigate 轻松完成，但我不确定如何使用这个特定方法来完成。有人可以帮忙吗？

Answer 1

你的例子有点含糊，所以我尽量解释一下。

有两种不同的方法可以将属性传递给屏幕(redux 实现除外)。

1) navigate Action

您可以通过将 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

示例

this.props.navigate('Profile', { name: 'Brent' })

2) screenProps

您可以将全局参数传递给导航，该导航在每个屏幕中都可用。

screenProps - Pass down extra options to child screens

示例

const SomeStack = createStackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

我已经创建了一个小型示例应用程序，我猜您正试图实现它。

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