从导航道具设置初始状态

Question

我正在使用React Navigation在屏幕之间路由.我有一个初始屏幕,其中包含一个FlatList项目的onclick,我路由到一个新的屏幕,同时传递这样的参数.

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

作为参考,通过将props作为参数传递给构造函数然后在它们上运行超级函数,您可以在调用任何其他生命周期函数之前设置初始状态或运行其他一次性函数.

Answer 2

使用 componentWillMount，而不是 navigationOptions

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