Zugang Redux Zustand Reagieren Navigation mit

Question

Ich habe folgendes Navigator React-Navigation mit:

const Navigator = StackNavigator(
    { 
    Home: { 
     screen: Home 
    }, 
    User: { 
     screen: User 
    } 
    } 
) 

Und meine User Komponente:

export default class User extends Component { 
    static navigationOptions = { 
    title:() => 'User' 
    } 

    render() { 
    return (
     <Text>This is the user page.</Text> 
    ) 
    } 
} 

Ich möchte den Titel der Navigationsleiste des User Szene des Benutzers sein Name. Der Name wird im Redux-Status beibehalten.

Da ich die User Szene aus der Home Szene zugreifen, kann ich den Namen des Benutzers übergibt, wenn ich die Szene drücken:

this.props.navigation.navigate('User', {name: user.name}) 

Allerdings, wenn der Name des Benutzers aktualisiert wird, wenn auf die User, dann ist die Navigationstitel wird nicht aktualisiert. Die einzige Lösung, die ich sehen kann, ist der Zugriff auf den Redux-Zustand von navigationOptions. Gibt es eine Möglichkeit, dies oder einen besseren Weg zu finden, um mit diesem Problem umzugehen? Vielen Dank.

Answer 1

fand ich 2 Lösungen für meine Antwort von einem issue auf reagieren-Navigations Repo GitHub.

1) Aktualisieren this.props.navigation.state jedes Mal die Stützen zu ändern:

componentWillReceiveProps(nextProps) { 
    if (nextProps.totalCharge) { 
    this.props.navigation.setParams({ totalCharge }); 
    } 
} 

2) Erstellen einer NavigationTitle Komponente, die mit dem Zustand verbunden ist Redux:

static navigationOptions = { 
    title: (navigation) => <MyConnectedTitle navigation={navigation} /> 
} 

Answer 2

Ich gehe davon aus, dass Sie

this.props.navigation.navigate('User', {name: user.name})

von einer Komponente aufrufen. Daher sollten Sie mapStateToProps in der Komponente mit dem Benutzernamen eingeben und dann als {name: ... Variable übergeben.

Zum Beispiel:

export class Component { 
    render() { 
    return (
     <View> 
     <Button onPress={() => this.props.navigation.navigate('User', {name: this.props.userName})} 
     </View> 
    ) 
    } 
} 

const mapStateToProps = (state) => ({ 
    userName: state.user.name 
}) 

export default connect(mapStateToProps)(Component)