Question

我正在使用react-navigation，尝试实现自定义标头将在每个页面上可见。尝试遵循此链接中的示例，一切都很好。显示了我的标题，但是现在我试图使用标题导航中的HOME链接导航回到主屏幕。

React Native: React Navigation - use the same header component in every screen?

在调试我的标头组件时，我可以清楚地看到导航道具，但是不确定为什么它不能导航。我的代码如下。任何帮助表示赞赏。

创建堆栈导航器

const AppNavigator = createStackNavigator({
 Home: {
  screen: MeetingList,    

 },
 MeetingDisplay: {
  screen: MeetingDisplay
 }
 },{
   initialRouteName: "Home",
   defaultNavigationOptions: ({ navigation }) => {
       return MyHeader(navigation)
   }  
 });

自定义标题组件

const MyHeader = (navigation) => {
   return {
       header: props => <Header navigation= {navigation} />,
       headerStyle: { backgroundColor: '#000' },
       headerTintColor: '#000',
   };
 }

我的标题组件

import React from 'react';
import { Text, View, } from 'react-native';

class Header extends React.Component {
    constructor(props) {
       super(props);
       /  /this.params = props.navigation.state.params;
       this.state = {

       }        
     }

render() {
    const { navigation } = this.props;
    return (
        <>
            <View>
                <Text onPress={()=> navigation.navigate('MeetingList')}>HOME</Text>
            </View>
        </>
    )
   }
}

 export default Header;

Answer 1

更改

 onPress={()=> navigation.navigate('MeetingList')}

到

onPress={()=> navigation.navigate('Home')}

您做错的是，您正在传递屏幕名称，您应该传递用于定义屏幕的路径的名称。

希望这会有所帮助！

React Native自定义标头组件导航

1 个答案: