대응 탐색 탐색기 내의 구성요소로 소품을 전달하는 방법

대응 탐색 탐색기 내의 구성요소로 소품을 전달하는 방법

전화를 통해 소품을 포장한 부품에 전달하려고 한다.create...Navigator전화, 즉

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

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

나는 어떻게 하면 매개 변수를 에 전달해 줄 수 있는지 알아내려고 한다.Wines/Stores/ 등으로부터 구성 요소Search구성 요소(위)내가 문서를 읽어봤는데 쉽게 할 수 있을 것 같아.navigation.navigate어떤 대상을 통과해서, 그러나 나는 이 특정한 방법으로 그것을 어떻게 해야 할지 잘 모르겠다.누가 좀 도와주시겠습니까?

너의 예는 조금 애매해서 나는 최대한 설명하려고 노력한다.

화면에 속성을 전달하는 방법에는 두 가지가 있다(환원 구현 제외).

1) 행동

통과를 통해 탐색된 화면에 매개 변수를 전달할 수 있음params스크린에 대한 논쟁

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

routeName - 앱의 라우터 어딘가에 등록된 대상 routeName

매개 변수 - 대상 경로에 병합할 매개 변수

액션 - (고급)화면이 네비게이터인 경우 하위 라우터에서 실행할 하위 액션.지원되는 작업의 전체 목록은 작업 문서를 참조하십시오.

키 - 탐색할 경로의 선택적 식별자.이 경로가 이미 있는 경우 이 경로로 다시 이동

샘플

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

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

이를 바탕으로 다음과 같은 화면에도 속성을 전달할 수 있다.

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>

이것은 비슷한 경우에 나에게 아주 잘 먹혔다.

참조URL: https://stackoverflow.com/questions/50432116/how-to-pass-props-to-component-inside-a-react-navigation-navigator