ReactNative實現tab標籤組合

createMaterialTopTabNavigator 上面部分存在其他組件如何處理

默認 createMaterialTopTabNavigator 會置頂頂部同時生成樣式很醜的tab標籤,如何在tab標籤上面部分添加自定義內容(組件)並且改掉默認樣式呢

MaterialTopTabNavigator 可以和 StackNavigator 互相嵌套使用

export default createStackNavigator(
  {
    Home: {
      screen: createMaterialTopTabNavigator({
        Home: {
          screen: HomeScreen,
          navigationOptions: {
            title: '登錄'
          }
        },
        Settings: {
          screen: SettingsScreen,
          navigationOptions: {
            title: '註冊'
          }
        }
      }, {
        initialRouteName: 'Home',
        lazy: true,
        upperCaseLabel: false,
        tabBarOptions: {
          style: {
            backgroundColor: '#e9e9ef',
            elevation: 0 // 去掉安卓默認的陰影
          },
          tabStyle: {
            backgroundColor: '#e9e9ef',
            borderBottomColor: '#3aaff6',
            borderBottomWidth: 1,
          },
          indicatorStyle: {
            height: 0, // 去掉下劃線
            borderBottomWidth: 0 // 去掉下劃線
          },
          labelStyle: {
            fontSize: 14,
            color: '#000'
          },
        },
      }),
      navigationOptions: {
        header: <MyHeader/>, // 關鍵: tab標籤上部分的組件
      }
    },
  },
  {
    initialRouteName: 'Home',
  }
)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章