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

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

Answer 2

使用componentWillMount，而不是navigationOptions

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

Answer 3

对于任何正在寻找的人来说，这是我到目前为止所做的工作。

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

从导航道具设置初始状态

3 个答案: