反應導航—從自定義標題組件訪問導航道具

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