React Native - 在一个屏幕上显示两个应用程序栏

Question

我的问题是我试图在我的应用程序中实现 2 种 Nagivation 类型，TabNavigation 和 StackNavigation，所以我使用根 StackNavigator，它有一条通往 myTabNavigator 的路线，一条通往我的另一个 StackNavigator（[= 的代码片段33=]).但是，当我导航到 查看屏幕 SecondActivity.js 时，将弹出两个 header。我尝试在 SecondActivity.js 上使用 header:null，但它会导致 header 都消失。

有没有办法从 SecondActivity.js 屏幕中仅删除 header 中的 1 个？

App.js（在此应用程序中使用 RootNavigator 组合 Tab 和 Stack 导航）

const App = TabNavigator({
 HomeScreen: { screen: HomeScreen },
 ProfileScreen: { screen: ProfileScreen },
}, {
     tabBarOptions: {
       activeTintColor: '#7567B1',
       labelStyle: {
       fontSize: 16,
       fontWeight: '600'
       }
     }
   });

const Go = StackNavigator({
 First: { screen: ProfileScreen },
 Second: { screen: SecondActivity }
});

const rootNav = StackNavigator({
 app: {screen: App},
 go: {screen: Go},
});

export default rootNav;

ProfileScreen.js

 static navigationOptions = {
   tabBarLabel: 'View/Edit', 
   header: null
 }

 // This Line Used to Navigate to SecondActivity.js Screen
 OpenSecondActivity(id) {
    this.props.navigation.navigate('Second', { ListViewClickItemHolder: id });
 }

 // The ListView onPress will call the function above.
 <ListView
           automaticallyAdjustContentInsets={false}

              dataSource={this.state.dataSource}

              renderSeparator= {this.ListViewItemSeparator}

              renderRow={(rowData) => <Text style={styles.rowViewContainer}
              onPress={this.OpenSecondActivity.bind(this, rowData.RecipeID)}> {rowData.RecipeName} </Text>}

            />

SecondActivity.js

static navigationOptions = {
  title: 'View Details',
};

Answer 1

发生这种情况是因为选项卡导航器正在堆栈导航器中呈现。

创建一个util文件，把这个方法放在上面。它重置堆栈并将选项卡导航器放在顶部

const resetActivities = (navigation, rootPath,props) => {

const stackAction = NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: rootPath,params:props })],
});
navigation.dispatch(stackAction);
}

并传递 'App' 和导航对象

Answer 2

每个 StackNavigator 都有自己的 header。
您正在使用嵌套的 stackNavigator，所以一个 header 是因为 Go (stackNavigator)，另一个是因为 rootNav (stackNavigator)。
Go StackNavigation 是不必要的，而是将 rootNav 更改为：

const App = TabNavigator({
 HomeScreen: { screen: HomeScreen },
 ProfileScreen: { screen: ProfileScreen },
}, {
     tabBarOptions: {
       activeTintColor: '#7567B1',
       labelStyle: {
       fontSize: 16,
       fontWeight: '600'
       }
     }
   });


const rootNav = StackNavigator({
 app: {screen: App},
  First: { screen: ProfileScreen },
 Second: { screen: SecondActivity }

});

export default rootNav;

React Native - 在一个屏幕上显示两个应用程序栏

React Native - Two Apps Bar Being Display in One Screen

android

react-native

react-native-android

react-navigation