React Navigation - Status als Requisite von der gesteuerten Komponente an eine andere Komponente übergeben

Question

Mit der React Navigation-Bibliothek möchte ich den Status von einer kontrollierten Komponente als Requisite an eine andere Komponente zur Anzeige übergeben. Ich kann dies jedoch weder mit der React Navigation-Bibliothek noch mit dem React Router von React Training (StackNavigator) erreichen. Im Folgenden wird mit meinem Code Navigation Reagieren:

// 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> 

Wie gebe ich den Zustand userSelection Komponente C in der Komponente B? Danke vielmals!

Answer 1

Sie können Parameter senden, während Sie zu anderen Bildschirmen navigieren. Detaillierte Informationen finden Sie in react-navigation docs.

Beispiel

<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