Question

在构造函数中设置值时，为什么在标题中有“ DEFAULT”并且在视图中有“ ---- Updated !! ----”？当我使用componentDidMount时它可以工作，但是当然它会被渲染两次。这是否意味着NavigationOptions甚至在构造函数执行之前就已执行？

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'DEFAULT'),
    };
  };

  constructor(props) {
    super(props)
    this.props.navigation.state.params = { otherParam:  "----Updated!!----" };
  }

  componentDidMount() {
    // this.props.navigation.setParams({ otherParam: 'Updated!' })
  }

  render() {
    const { navigation } = this.props;
    const otherParam = navigation.getParam('otherParam', 'DEFAULT2');
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      </View>
    );
  }

Answer 1

在类中具有静态属性/方法，这并不仅仅意味着您想在通过构造函数实例化任何实例之前执行/访问该方法/属性。

相反，这意味着该属性/方法将在该类的所有实例之间共享，这就是为什么static属性/方法也被称为类属性/方法的原因实例属性/方法。

一个暗示是，您无需类的实例即可访问这些道具。

在您的特定情况下，react本机导航使用DetailsScreen.navigationOptions.title来显示屏幕标题。

反应本机导航构造函数与componentDidMount

1 个答案: