询问ChatG-PT: 两个/级底部TabBar共存如何实现，结果给的方案试验一直有问题。

后来询问ChatG-PT："react-native-router-flux": "4.2.0", 如何实现 tabbar 嵌套二级tabbar。

然后给出了一种方案，居然没有用 flux的<Tabs />，试一试看看，稍作改变，居然成功了。

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Actions, Scene, Router, TabBar } from 'react-native-router-flux';

// 定义一级 Tab 的页面组件
const Tab1A = () => <View>
  <TouchableOpacity onPress={() => {
    Actions.tabbar1()
  }}><Text>Tab 1A</Text>
  </TouchableOpacity>
</View>;
const Tab1B = () => <View>
  <TouchableOpacity onPress={() => {
    Actions.tab2b()
  }}><Text>Tab 1B</Text>
  </TouchableOpacity>
</View>;

// 定义二级 Tab 的页面组件
const Tab2A = () => <View>
  <TouchableOpacity onPress={() => {
    // Actions.pop() 
    // Actions.jump('tabbar') 

    // Actions.jump('tab1b')
    Actions.tab1b()
  }}><Text>Tab 2A</Text>
  </TouchableOpacity>
</View>;
const Tab2B = () => <View>
  <TouchableOpacity onPress={() => {
    Actions.push('page2')
  }}><Text>Tab 2B</Text>
  </TouchableOpacity>
</View>;

// 定义其它页面组件
const Page1 = () => <View>
  <TouchableOpacity onPress={() => {
    Actions.page2()
  }}><Text>Page1</Text>
  </TouchableOpacity>
</View>;
const Page2 = () => <View>
  <TouchableOpacity onPress={() => {
    Actions.page1()
  }}><Text>Page2</Text>
  </TouchableOpacity>
</View>;

// const App = () => (
//   <View style={{backgroundColor: 'red', flex: 1}} />
// )

// 创建 Router 组件，并定义场景和 TabBar 布局
const App = () => (
  <Router
    onStateChange={st => {
      //路由栈 页面栈 
      console.log('onStateChange::', st.routes);
    }}>
    <Scene key="root">
      <Scene
        key="tabbar"
        tabs={true}
        tabBarComponent={TabBar}
        tabBarPosition="bottom"
      >
        <Scene key="tab1a" component={Tab1A} title="Tab 1A" />
        <Scene key="tab1b" component={Tab1B} title="Tab 1B" />
      </Scene>

      <Scene
        key="tabbar1"
        tabs={true}
        tabBarComponent={TabBar}
        tabBarPosition="bottom"
      >
        <Scene key="tab2a" component={Tab2A} title="Tab 2A >>" />
        <Scene key="tab2b" component={Tab2B} title="Tab 2B >>" />
      </Scene>

      <Scene key="page1" component={Page1} title="Page 1" />
      <Scene key="page2" component={Page2} title="Page 2" />

    </Scene>
  </Router>
);

// 渲染 TabBar 图标
const TabIcon = ({ selected, title }) => (
  <Text style={{ color: selected ? 'red' : 'black' }}>{title}</Text>
);

export default App;

ChatG-PT原答案如下

import React from 'react';
import { View, Text } from 'react-native';
import { Actions, Scene, Router, TabBar } from 'react-native-router-flux';

// 定义二级 Tab 的组件
const Tab1A = () => <View><Text>Tab 1A</Text></View>;
const Tab1B = () => <View><Text>Tab 1B</Text></View>;
const Tab2A = () => <View><Text>Tab 2A</Text></View>;
const Tab2B = () => <View><Text>Tab 2B</Text></View>;

// 创建 Router 组件，并定义场景和 TabBar 布局
const App = () => (
  <Router>
    <Scene key="root">
      <Scene
        key="tabbar"
        tabs={true}
        tabBarComponent={TabBar}
        tabBarPosition="bottom"
      >
        <Scene key="tab1" title="Tab 1" icon={TabIcon}>
          <Scene key="tab1a" component={Tab1A} title="Tab 1A" />
          <Scene key="tab1b" component={Tab1B} title="Tab 1B" />
        </Scene>
        <Scene key="tab2" title="Tab 2" icon={TabIcon}>
          <Scene key="tab2a" component={Tab2A} title="Tab 2A" />
          <Scene key="tab2b" component={Tab2B} title="Tab 2B" />
        </Scene>
      </Scene>
    </Scene>
  </Router>
);

// 渲染 TabBar 图标
const TabIcon = ({ selected, title }) => (
  <Text style={{ color: selected ? 'red' : 'black' }}>{title}</Text>
);

export default App;