ReactNative實(shí)現(xiàn)tab標(biāo)簽組合

yanest 發(fā)布于2019-08-26 12:24 / 1338人閱讀

摘要：上面部分存在其他組件如何處理默認(rèn)會置頂頂部同時生成樣式很丑的標(biāo)簽如何在標(biāo)簽上面部分添加自定義內(nèi)容組件并且改掉默認(rèn)樣式呢可以和互相嵌套使用登錄注冊去掉安卓默認(rèn)的陰影去掉下劃線去掉下劃線關(guān)鍵標(biāo)簽上部分的組件

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

默認(rèn) createMaterialTopTabNavigator 會置頂頂部同時生成樣式很丑的tab標(biāo)簽,如何在tab標(biāo)簽上面部分添加自定義內(nèi)容（組件）并且改掉默認(rèn)樣式呢

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 // 去掉安卓默認(rèn)的陰影
          },
          tabStyle: {
            backgroundColor: "#e9e9ef",
            borderBottomColor: "#3aaff6",
            borderBottomWidth: 1,
          },
          indicatorStyle: {
            height: 0, // 去掉下劃線
            borderBottomWidth: 0 // 去掉下劃線
          },
          labelStyle: {
            fontSize: 14,
            color: "#000"
          },
        },
      }),
      navigationOptions: {
        header: , // 關(guān)鍵： tab標(biāo)簽上部分的組件
      }
    },
  },
  {
    initialRouteName: "Home",
  }
)