react-native - 无法访问子渲染上的导航

Question

请有人向我解释为什么我可以在主渲染而不是子渲染上访问 this.props.navigation，还请让我知道如何将此参数传递给其他渲染方法

class HomeScreen extends React.Component {

renderContent() {
  return (
    <View>    
        <Button
        title="ProfileScreen"
        onPress={() =>
        navigate('ProfileScreen')
        } />   
    </View>
  );
}

render() {
  const { navigate } = this.props.navigation;
  return (
        <ReactNativeParallaxHeader
          headerMinHeight={24}
          renderContent={this.renderContent}
        />
    );
  }
}

export default HomeScreen

我尝试实现箭头功能，但仍然没有任何反应并且未定义

Answer 1

因为您在 render() 方法中定义了导航。

这应该工作

class HomeScreen extends React.Component {

let navigate;

constructor(props) {
    super(props)
    navigate = props.navigation.navigate;
}


renderContent() {
  return (
    <View>    
        <Button
        title="ProfileScreen"
        onPress={() =>
        navigate('ProfileScreen')
        } />   
    </View>
  );
}

render() {
  
  return (
        <ReactNativeParallaxHeader
          headerMinHeight={24}
          renderContent={this.renderContent}
        />
    );
  }
}

export default HomeScreen