Установить начальное состояние из реквизита навигации

Question

Я использую React Navigation для маршрутизации между экранами. У меня есть начальный экран, который содержит FlatList, щелчок по элементу, который я направляю на новый экран, при передаче таких параметров, как этот.

props.navigation.navigate('Details', {
    id: props.id,
    title: props.title
});

На экране Details я могу получить его, используя следующий код, но как мне установить состояние, учитывая, что это статическая функция, и у меня нет доступа к this.setState().

static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;

    console.log(params);
};

Answer 1

Это позволит вам обработать его в конструкторе, который является другим местоположением, куда может пойти любое, что раньше помещалось в componentWillMount.

constructor(props) {
    super(props)
    this.state = {
        params: props.navigation.state.params
    }
}

Для справки: передавая реквизиты в качестве аргумента конструктору, а затем выполняя над ними суперфункцию, вы получаете возможность установить исходное состояние или запустить другие одноразовые функции до вызова любых других функций жизненного цикла. .

Answer 2

Для тех, кто смотрит это, я сумел заставить его работать до сих пор.

export default class Detail extends React.PureComponent {

state = {
    id: this.props.navigation.getParam('id', -1),
    title: this.props.navigation.getParam('title', null)
};

render() {

        return (

            . . .

        );
    }

}

Это позволяет вам инициализировать компонент с начальным состоянием, возможно, это не самый лучший способ, и код определенно мог бы справиться с некоторой деструктуризацией, но я не уверен, как это сделать, так что пока это работает. Хотелось бы, чтобы кто-нибудь предложил более эффективный и эффективный способ.

"dependencies": {
"react": "^16.3.1",
"react-native": "0.55.4",
"react-navigation": "^2.0.1"
}

Answer 3

Использовать componentWillMount вместо navigationOptions

componentWillMount(){
   this.setState({
       params:this.props.navigation.state.params
       })
 }