React-Native：将TabNavigator，StackNavigator与Header结合使用

我想将“TabNavigator”，“StackNavigator”与“Header title”和“Tababr：Tab-1＆Tab-2”结合起来 .

流程（见代码）：

点击“Tab -1 Screen-1” - >在新屏幕中打开tab1Screen1，但我想打开相同的标签， Headers 和 Headers 相同

单击“Tab -2 Screen-1” - >在新屏幕中打开tab2Screen1，但我想在 Headers 和 Headers 的同一选项卡中打开 .

请检查以下代码和附加的屏幕截图 .

import React, { Component } from 'react';
import Tab1 from './Tab1.js'
import Tab2 from './Tab2.js'
import Tab1Screen1 from './Tab1Screen1.js'
import Tab2Screen1 from './Tab2Screen1.js'
import { TabNavigator,StackNavigator } from 'react-navigation'
export const TabStack = TabNavigator({
  Tab1:{screen:Tab1,navigationOptions: { title: 'Tab - 1' }},
  Tab2:{screen: Tab2, navigationOptions: { title: 'Tab - 2' }},
},{
  order: ['Tab1', 'Tab2']
});
export const Stack = StackNavigator({
  Tab11:{screen: TabStack,navigationOptions: { title: 'Header title' }},
  Tab1Screen1:{screen:Tab1Screen1},
  Tab2Screen1:{screen:Tab2Screen1},
})

**index.js**
import { AppRegistry } from 'react-native'
import { Stack } from './src1/navi.js'
AppRegistry.registerComponent('RNNavigators', () => Stack);

Tab1.js

import React, {Component} from 'react';
import { Text, View, Button } from 'react-native';
import { TabNavigator } from 'react-navigation';

export default class Tab1 extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Enter Tab-1 Screen - 1" onPress = {()=> this.props.navigation.navigate('Tab1Screen1')}/>
      </View>
    );
  }
}

Tab2.js

import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
import { TabNavigator,  } from 'react-navigation';

export default class Tab2 extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Enter Tab-2 Screen - 1" onPress = {()=> this.props.navigation.navigate('Tab2Screen1')}/>
      </View>
    );
  }
}

Tab1Screen1.js

从'react'导入React，;从'react-native'导入{Text，View，Button，};

export default class Tab1Screen1 extends Component {render（）{return（Tab - 1 Screen1

<Text style={{margin:10}}>I want to open this screen within Tab-1 with header title bat & tab bar</Text>
  </View>
);

} Tab2Screen2.js

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

export default class Tab2Screen1 extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Tab - 2 Screen- 1</Text>

        <Text style={{margin:10}}>I want to open this screen within Tab-2 with Header title & tab bar</Text>
      </View>
    );
  }
}

截图