Question

我正在探索React Navigation在使用自定义标头时提供的可能性。现在，我试图从CustomHeader组件访问navigation.props。如何使用另一个组件内的按钮访问.goBack（）等navigation.props。

提前谢谢。

CustomHeader

class CustomHeader extends React.Component {
  render() {
    return (
      <View
      style={{
        flexDirection: "row",
        height: 80,
        paddingTop: 20,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <Button
      onClick={this.props.handleClick}
      title="Back"
      color="black"
      />
      <Text> Custom header </Text>
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="red"
      />
    </View>
    );
  }
}

使用自定义标题的屏幕

class StreamScreen extends React.Component {
  // Custom header
  static navigationOptions = {
    header: <CustomHeader handleClick={() => this.props.navigation.goBack()} />,
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

Answer 1

我认为你可以为CustomHeader添加道具。

index.js

<CustomHeader navigation={this.props.navigation}>

customheader.js中的

您可以访问this.props.navigation 或

const CustomHeader = (navigation) =>{ // You can access like navigation.goBack() etc. }

React Navigation - 从自定义标题组件访问导航道具

1 个答案: