Question

我正在尝试使用自定义导航标题，但未显示。我的代码如下：

App.js

<View style={styles.appWrapper}>
    <AppRoute />
</View>

AppRoute正在调用我的路由文件route.js。

routes.js

const PublicDrawer = createDrawerNavigator({
  'DashboardScreen': {screen: Dashboard}, // the screen where I want to show custom navbar
  'TaskDetailScreen': {screen: TaskDetail},
  'StartTaskScreen': {screen: StartTask}
}, {
  contentComponent: MainDrawer,
  drawerWidth: 300,
  initialRouteName: 'DashboardScreen' ,
  drawerPosition: 'left'
});

const Navigation = createStackNavigator({
  'MainRoutes': { screen: PublicDrawer, navigationOptions: { headerShown: false }},
});

Dashboard.js

export default class Dashboard extends Component<Props> {
  static navigationOptions =  ({ navigation }) => {
    return {
      header: <AppNavHeader navigation={navigation}/> // AppNavHeader from another file
    }
  };

  constructor(props){
    super(props);
    this.state = {};
  }

  // The rest of the code

}

依赖项

"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/stack": "^5.0.0",
"react-native": "0.60.5",
"react-navigation": "^4.1.1",
"react-navigation-drawer": "^2.3.4",
"react-navigation-stack": "^2.1.1"

如果我直接从AppNavHeader显示routes.js，则它正在工作，但是由于某种原因，我不想从那里调用它。

Answer 1

我这样使用它。是工作。你可以尝试

静态navigationOptions =（{导航}）=> { 返回标题（导航，enter code here）； }

返回{ headerTitle：（{title.toUpperCase（）}）， headerLeft：_leftButton， headerRight：_rightButton }

Answer 2

我会告诉你我如何使我成为同一个人。我不相信反应导航自定义标题。所以我首先要做的是通过以下方式禁用反应导航的标题：

{
    defaultNavigationOptions: {
      headerShown: false,
    },
    initialRouteName: 'HomeCard',
    transitionConfig: () => fromRight(),
  },

在您的堆栈导航器中。

现在，下一步是我创建了一个标题全局组件，该组件可以像这样在各处使用：

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={headerStyles.newHeaderStyle}>
        <View style={{opacity: 0}}>
          <Image source={require('../assets/images/crossIcon.png')} />
        </View>
        <View style={{flexShrink: 1}}>
          <Text style={headerStyles.headerText}>{this.props.title}</Text>
        </View>
        <View style={{left: -20, paddingLeft: 10, marginLeft: 10}}>
          <TouchableOpacity
            style={headerStyles.imageView}
            hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}
            onPress={() => this.props.navigation.goBack()}>
            <Image
              style={{height: 15, width: 15}}
              source={require('../assets/images/crossIcon.png')}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

然后在我想要该标题的任何页面中，我都会这样做：

从“ ../components/Header”导入标题；

class Home extends Component {


render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <Header navigation={this.props.navigation} title="SUPPORT" />
        <ScrollView style={supportStyles.view1}>
          {this.renderSupportData()}
        </ScrollView>
      </SafeAreaView>
    );
  }

}

希望有帮助。毫无疑问

反应未显示的本机自定义导航标题

2 个答案: