如何將道具傳遞給 React Navigation 導航器內的組件？

Question

我正在嘗試將道具傳遞給一個組件，該組件已通過調用create...Navigator調用包裝，即

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

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

我試圖弄清楚如何將參數從Search組件（上圖）傳遞給Wines / Stores / 等組件。 我已經閱讀了文檔，顯然這可以通過傳入一個對象使用navigation.navigate輕松完成，但我不確定如何使用此特定方法來完成。 有人可以幫忙嗎？

Answer 1

你的例子有點含糊，所以我盡量解釋。

有 2 種不同的方式將屬性傳遞給屏幕（redux 實現除外） 。

1） navigate動作

您可以通過將params參數傳遞給屏幕來將參數傳遞給導航屏幕。

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

routeName - 已在應用程序路由器中某處注冊的目的地 routeName

params - 合並到目標路線的參數

動作- （高級）在子路由器中運行的子動作，如果屏幕是導航器。 有關受支持操作的完整列表，請參閱操作文檔。

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

Answer 2

基於此，您還可以將屬性傳遞給屏幕，如下所示：

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>

在類似的情況下，這對我來說效果很好。