Как передать реквизиты компоненту внутри навигатора React Navigation?

Ваш пример немного расплывчат, поэтому я пытаюсь объяснить как можно больше.

Есть 2 разных способа передать свойства на экраны (кроме реализации redux).

1) действие navigate

Вы можете передать параметры на экран с возможностью навигации, передав аргумент 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>
    );
  }
}

На основе это вы можете передавать свойства на экраны также следующим образом:

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>

В аналогичном случае у меня это отлично сработало.