react-native - 一起使用 Tab 和 Stack Navigator

Question

我正在使用React-Navigation在 React-Native 上构建一个应用程序

现在，我正在使用的里面Stack-Navigation和 TabNavigator（更新它DrawerNavigator）

import { 
  createStackNavigator,
   TabNavigator,
   DrawerNavigator
 } from 'react-navigation';

import CoinCapCharts from "./src/container/CoinCapCharts.js"

import CoinCap from './src/container/CoinCap.js';


//THis is being Exported to App.js

 export const Tab = TabNavigator({
  TabA: {
    screen: CoinCap 
  },
  TabB: {
    screen: CoinCap
  }
}, {
  order: ['TabA', 'TabB'],
  animationEnabled: true,
})

export const MyScreen = createStackNavigator({
  Home: { 
    screen: CoinCap
  },
  CoinCapCharts: {
     screen: CoinCapCharts
    }
},{
    initialRouteName: 'Home',
    headerMode: 'none'
});


export const Drawer = DrawerNavigator({
  Tabs: { screen: Tab },
  Stack: { screen: MyScreen },
})

我在我的 App.js 中导入这个我正在做这样的事情

import React from 'react';
import {
  Drawer
 }from './Screen.js';
import {
  View
} from 'react-native';

export default class App extends React.Component {
  render() {
    return (
    <View>
      <Drawer/>
      <Tab/>
      </View>
    );
  }
}

现在，这确实在我第一次运行我的应用程序时显示选项卡，但是在我导航到不同的屏幕并返回后，它似乎没有再次显示该选项卡

[问题：]我可能做错了什么，我该如何解决？

标签： react-nativereact-navigation

Answer 1

尝试在另一个中定义一个。就像是：

const Tab =  TabNavigator({
  TabA: {
    screen: Home 
  },
  TabB: {
    screen: Home
  }
}, {
  order: ['TabA', 'TabB'],
  animationEnabled: true,
})

export const MyStack = createStackNavigator({
  Home: { 
    screen: Home 
  },
  CoinCapCharts: {
     screen: CoinCapCharts
  },
  Tab: { 
    screen: Tab
  },
},{
    initialRouteName: 'Home',
    headerMode: 'none'
});

现在，渲染 MyStack（不确定这Screen是最好的名称：）

export default class App extends React.Component {
  render() {
    return (
    <View>
      <MyStack />
      </View>
    );
  }
}