Question

我有一个用于堆栈导航的自定义标题，并且在按图像时想导航到另一页。但是当我按下图像时，出现错误undefined is not an object (evaluating _this.props.navigation.navigate')

在我的App.js中

const ProfileStackNavi = createStackNavigator({
  stackAndTab:{
    screen:ProfileTopTabNavigator,
    navigationOptions: {
      header: (
        <MyPageTabBarHeader />
      )
    },
  }
})

在我的自定义标头类中

export default class MyPageTabBarHeader extends Component {
  constructor(props) {
    super(props)
  }
  render() {
  return(
    <View style={{width:375,height:250, backgroundColor:'white'}}>
          <TouchableOpacity onPress={()=>this.props.navigation.navigate('Register')}>
                    <Image
                    style={{width:23, height:23}}
                    source{require('../Components/Assets/register.png')} />
           </TouchableOpacity>
        </View>
    </View>
    )
  };
}

我也尝试了<MyPageTabBarHeader navigation={this.props.navigation}/>，但是它给我的错误undefined is not an object (evaluating this.props.navigation.navigate')与以前相同，但在this之前没有_。

已编辑

在我的App.js中，我有createAppContainer。看起来像这样：

const StartSwitchNavigator = createStackNavigator(
  {
    one:{
    screen:screenOne,
   },
 {
    two:{
    screen:ProfileStackNavi,
   }
);

const App = createAppContainer(StartSwitchNavigator);

export default App;

Answer 1

导航未正确通过。尝试通过这种方式传递它：

const ProfileStackNavi = createStackNavigator({
  stackAndTab:{
    screen:ProfileTopTabNavigator,
    navigationOptions: ({navigation}) => ({
      header: <MyPageTabBarHeader navigation= {navigation} />,
    })
  }
})

希望有帮助！

Answer 2

似乎navigation道具没有被传递下来，这对于自定义标头很正常。该道具通常仅传递到屏幕/视图。您只需在标头组件中import withNavigation from 'react-navigation'，然后在文件底部export default withNavigation(MyPageTabBarHeader)，而不是在声明类时。

您将可以使用navigation道具。这是有关该功能的doc。

react-native-navigation：使用自定义标题导航

2 个答案: