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

Posted 2023-02-22

【中文标题】如何将道具传递给 React Navigation 导航器中的组件？

【英文标题】：How to pass props to component inside a React Navigation navigator?

【发布时间】：2018-10-30 02:56:39

【问题描述】：

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

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

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

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

【问题讨论】：

你想制作像 instagram 这样的搜索屏幕吗？具有不同解决方案的 searchBar 和下面的选项卡，您想将搜索条件传递给选项卡吗？

【参考方案1】：

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

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

1) navigate 操作

您可以通过将params 参数传递给屏幕来将参数传递给导航屏幕。

navigation.navigate(routeName, params, action, key) 或 navigation.navigate(routeName, params, action)

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

params - 合并到目标路由的参数

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

key - 导航到哪个路径的可选标识符。如果它已经存在，则导航回该路线

示例

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

【讨论】：

另一种方法是使用 Redux 来绕过 React-navigations 糟糕的架构。或者使用 Wix 的 React-native-navigation 更好，它有“passProps”。

screenProps 已在 react-navigation 5 github.com/react-navigation/rfcs/pull/5

中移除

【参考方案2】：

基于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>

在类似的情况下，这对我来说效果很好。

【讨论】：

准确答案