web-dev-qa-db-ja.com

React Navigationナビゲーター内のコンポーネントに小道具を渡す方法は？

私はcreate...Navigator呼び出しの呼び出しを介してラップされたコンポーネントに小道具を渡そうとしています.

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

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

Winesコンポーネント（上記）からStores/Searchなどのコンポーネントにパラメーターを渡す方法を見つけようとしています。私は ドキュメントを読む をしており、明らかにこれはnavigation.navigateでオブジェクトを渡すことで簡単にできるが、この特定のメソッドでどのようにそれを行うのかわからない。誰か助けてもらえますか？

javascriptreactjsreact-nativereact-native-androidreact-navigation
11
James Ko

あなたの例は少しあいまいなので、できる限り説明しようとします。

画面にプロパティを渡すには2つの異なる方法があります（redux実装を除く）。

1） navigate アクション

params引数を画面に渡すことで、ナビゲートされた画面にパラメーターを渡すことができます。

navigation.navigate（{routeName、params、action、key}）OR navigation.navigate（routeName、params、action）

routeName-アプリのルーターのどこかに登録されている宛先routeName

params-宛先ルートにマージするパラメーター

action詳細）画面がナビゲーターの場合、子ルーターで実行するサブアクション。サポートされているアクションの完全なリストについては、アクションドキュメントを参照してください。

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