React Native：嵌套TabNavigator设置TabIcon失败及JSX作用域提示

一、嵌套TabNavigator的TabIcon/Label配置问题 #

看起来你是把TabNavigator嵌套在了另一个TabNavigator的screen里，这时候要给内层Tab的页面配置tabBarLabel，得注意配置的层级：

1. 给内层TabNavigator的具体页面设置标签：
   你需要把navigationOptions配置在内层TabNavigator的screen项里，或者直接在对应的页面组件内部通过static navigationOptions定义（只要这个组件是内层TabNavigator的直接screen）。比如你的代码可以调整成这样：

   const AppStack = TabNavigator({
     orders: {
       // 这是外层Tab的标签配置
       navigationOptions: {
         tabBarLabel: 'Orders',
       },
       // 内层TabNavigator
       screen: TabNavigator({
         // 内层的第一个页面
         OrderList: {
           screen: OrderListScreen,
           // 在这里配置内层Tab的标签，或者在OrderListScreen里用static属性
           navigationOptions: {
             tabBarLabel: '我的订单',
             // 如果要自定义TabIcon，也可以在这里加tabBarIcon属性
             tabBarIcon: ({ focused }) => (
               <Icon name={focused ? 'list-active' : 'list-inactive'} size={20} />
             )
           }
         },
         // 内层的其他页面
         OrderDetail: {
           screen: OrderDetailScreen,
           navigationOptions: {
             tabBarLabel: '订单详情'
           }
         }
       }, {
         // 内层TabNavigator的全局配置，比如tabBarPosition、style等
         tabBarPosition: 'top',
       })
     },
     // 外层其他Tab项
     profile: {
       navigationOptions: { tabBarLabel: '我的' },
       screen: ProfileScreen
     }
   })
   

   如果在页面组件内部用static navigationOptions，要确保组件是内层TabNavigator的直接screen，比如OrderListScreen里：

   class OrderListScreen extends Component {
     static navigationOptions = () => ({
       tabBarLabel: 'Orders',
       // 同样可以加tabBarIcon
     })
     // ...组件其他代码
   }
   

2. 给内层TabNavigator设置全局导航选项：
   可以把navigationOptions放在内层TabNavigator的第二个参数配置对象里，比如：

   screen: TabNavigator({ /* 内层screen */ }, {
     navigationOptions: {
       header: null // 比如统一隐藏内层Tab页面的头部
     },
     // 其他配置
   })
   

二、"React must be in scope when using JSX" 提示问题 #

这个问题很好解决：所有使用JSX的组件文件，都必须在开头导入React，哪怕你没有直接在代码里写React这个变量。因为JSX会被Babel编译成React.createElement()的调用，所以React必须在当前作用域内。

解决方法就是在每个包含JSX的文件顶部添加：

import React from 'react';

比如你的页面组件、navigation.js文件（如果里面有JSX的话）都要加上这行代码。

内容的提问来源于stack exchange，提问作者Sarmad Shah