Доступ Redux состояние с помощью React Навигации

Question

У меня есть следующее Navigator с помощью React-Navigation:

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

И мой User компонент:

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

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

Я хочу, чтобы название панели навигации User сцены быть пользователем имя. Имя хранится в состоянии Redux.

Поскольку я получить доступ к User сцены из Home сцены, я мог бы передать имя пользователя, когда я нажимаю на сцену:

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

Однако если имя пользователя обновляется, когда на User, то название навигации не будет обновляться. Единственное решение, которое я вижу, - это доступ к состоянию Redux с navigationOptions. Есть ли способ сделать это или лучший способ справиться с этой проблемой? Благодарю.

Answer 1

Я нашел 2 решения моего ответа от issue на реагирующих-навигаций GitHub репо.

1) Обновление this.props.navigation.state каждый раз, когда реквизит изменить:

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

2) Создание компонента NavigationTitle, который подключен к состоянию Redux:

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

Answer 2

Я предполагаю, что вы звоните

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

из компонента. Поэтому вы должны mapStateToProps в компоненте с именем пользователя, а затем передать его как переменную {name: ....

Например:

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)