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

Question

我的问题是我试图在我的应用程序中实现两种类型的 Nagivation 类型，TabNavigation 和 StackNavigation，所以我使用根 StackNavigator，它有一条通往 myTabNavigator 的路线，一条通往我的另一个 StackNavigator(App.js 的代码 fragment ) .但是，当我导航到 View Screen which is SecondActivity.js 时，会弹出两个标题。我尝试在 SecondActivity.js 上使用 header:null 但它会导致两个 header 都消失。

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

App.js(使用 RootNavigator 在此 App 中组合 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

• 每个 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;