如何将道具传递给React Navigation导航器中的组件？

Question

我正在尝试将道具传递给通过调用create...Navigator调用包裹的组件，即

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

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

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

Answer 1

基于this，您还可以将属性传递给屏幕，如下所示：

return (
    <NavigationContainer>
      <Tab.Navigator>
            <Tab.Screen name="Home">
                {(props) => <HomeScreen  {...props} text={homeText} />}
            </Tab.Screen>
           <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );

与文档中以下方法的区别

            <Tab.Screen name="Home" component={HomeScreen} />

是这个

            <Tab.Screen name="Home">
                {(props) => <HomeScreen  {...props} text={homeText} />}
            </Tab.Screen>

在类似情况下，这对我来说还不错。

Answer 2

你的例子有点模糊，所以我尽可能多地解释。

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

1）navigate行动

您可以将参数传递到导航屏幕，并将params参数传递给屏幕。

  

navigation.navigate（{routeName，params，action，key}）或   navigation.navigate（routeName，params，action）

     

routeName - 已在应用路由器中某处注册的目标路由

     

params - 要合并到目的地路线的参数

     

操作 - （高级）如果屏幕是导航器，则在子路由器中运行的子操作。有关完整列表，请参阅Actions Doc   支持的行动。

     

键 - 要导航到的路线的可选标识符。导航回此路线（如果已存在）

<强>示例

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

2）screenProps

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

  

screenProps - 将额外选项传递给子屏幕

<强>示例

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