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

Question

我的问题是我尝试在我的应用程序，TabNavigation和StackNavigation中实现2种类型的Nagivation类型，所以我使用了一个根StackNavigator，它有一个到myTabNavigator的路由，另一个到我的另一个StackNavigator（App.js的代码片段） 。但是，当我导航到查看屏幕，即SecondActivity.js 时，会弹出两个标题。我尝试在SecondActivity.js上使用header:null，但这会导致两个标题都消失。

有没有办法只从SecondActivity.js屏幕中删除1个标题？

App.js（使用RootNavigator在此应用中组合制表符和堆栈导航）

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都有自己的标题。

• 发生了这种情况，你正在使用嵌套的stackNavigator，因此一个头是因为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;

Answer 2

这是因为Tab导航器正在堆栈导航器中呈现。

创建一个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'和导航对象