React Navigation - 제어 된 구성 요소에서 다른 구성 요소로의 소품으로 전달

Question

React Navigation 라이브러리를 사용하여 제어 된 구성 요소의 상태를 다른 구성 요소로 전달하여 표시 할 수 있습니다. 그러나 React Navigation 라이브러리 나 React Router from React Training (StackNavigator)을 사용하여이 작업을 수행 할 수 없습니다. 다음은 내 코드 탐색 반응 사용 :

// root component 
class HomeScreen extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
    // no state yet 
    }; 
} 

    render() { 

    return(
     <View></View> 
    ) 
    } 
} 

// stack navigation 
const MyApp = StackNavigator({ 
    Home: { screen: Home }, 
    A: { screen: A }, 
    B: { screen: B }, 
    C: { screen: C }, 
    D: { screen: D }, 
}, 


// controlled component getting user input and saving as state 
class B extends Component { 

constructor(props) { 
    super(props); 
     this.state = { 
     page:'B', 
     query: '', 
     showTextInput: true, 
     showSearchResults: true, 
     showSearchAgain: false, 
     userSelection: '', 
     } 
    }; 

// other code in this component is receiving input as state query, 
matching it with a set of search terms, and taking the selection and 
setting it as state userSelection - all successfully 

// the button in this code successfully navigates to component C - 
the only question is how to pass state userSelection to C? 
<TouchableOpacity onPress={() => navigate('C')}> 
    <View style={styles.button}> 
    <View style={styles.buttonTextAlign}> 
     <Text style={styles.buttonText}> 
      Button 
     </Text> 
    </View> 
    </View> 
</TouchableOpacity> 

가 어떻게 구성 요소 C에 구성 요소 B의 상태 userSelection을 통과합니까? 많은 감사합니다!

Answer 1

다른 화면으로 이동하는 동안 매개 변수를 보낼 수 있습니다. 자세한 내용은 react-navigation docs에서 확인할 수 있습니다.

예

<Button 
    onPress={() => navigate('C', {name: 'Brent'})} 
    title="Go to Brent's profile" 
/> 

// and in your C Component 
console.log(this.props.navigation.state.params.name) // logs Brent