动态更改activeTintColor

时间:2019-09-12 12:47:02

标签: react-native

我正在使用React Native应用,我想根据API值更新标签栏上activeTintColor的颜色。

我知道我可以在Component中致电:

  static navigationOptions = {
    tabBarOptions: {
      activeTintColor: 'red'
    },
  }

要更改颜色,但是,在我的标签导航器中,我正在显示一个堆栈导航器,因此,如果将上述代码添加到组件中,则不会更改颜色。< / p>

这是我的路由器代码(请注意,我在选项卡中使用了堆栈,这就是引起问题的原因):

export const SpaceStack = createStackNavigator(
  {
    MainScreen: {
      screen: MainScreen,
    },
    AlertListScreen: {
      screen: AlertListScreen
    },
    ChartScreen: {
      screen: ChartScreen
    },
    ImpersonationScreen: {
      screen: ImpersonationScreen
    },
    SelectOrganizationScreen: {
      screen: SelectOrganizationScreen
    }
  }
);

export const SignedIn = createBottomTabNavigator(
  {
    Space: {
      screen: SpaceStack,
      navigationOptions: {
        tabBarLabel: 'Spaces',
        tabBarIcon: ({ focused, tintColor }) => (
          focused ? <Image
            style={{ tintColor: global.brandColor }}
             source={require('../images/icon_space_selected.png')}
           /> :
           <Image
              source={require('../images/icon_space.png')}
            />
        ),
      }
    },
    Alerts: {
        screen: createStackNavigator({
            Alerts: {
                screen: AlertListScreen
            }
        }),
        navigationOptions: {
            title: 'Alerts',
            tabBarLabel: 'Alerts',
                tabBarIcon: ({ focused, tintColor }) => (
                  focused ? <Image
                   style={{ tintColor: global.brandColor }}
                   source={require('../images/icon_alerts_selected.png')}
                   /> :
                   <Image
                      source={require('../images/icon_alerts.png')}
                    />
                ),
        }
    },
    Settings: {
      screen: SettingsScreen,
      navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon: ({ focused, tintColor }) => (
          focused ? <Image
            style={{ tintColor: global.brandColor }}
            source={require('../images/icon_settings_selected.png')}
           /> :
           <Image
              source={require('../images/icon_settings.png')}
            />
        ),
      }
    },
  },
  {
    tabBarOptions: {
      activeTintColor: global.brandColor,
      labelStyle: { fontFamily: FontMedium, },
    }
  }
);

有人知道我该如何更改吗?

2 个答案:

答案 0 :(得分:0)

尝试一下!

age

然后,您可以调度一个操作来更改您的import org.apache.spark.sql.{Encoders} import sparkSession.implicits._ case class Person(name: String, age: Option[Int], sex: String, siblings: Int) val schema = Encoders.product[Person].schema val dfInput = sparkSession.read .format("csv") .schema(schema) .option("header", "true") .load("path/to/csv.csv") .as[Person]

答案 1 :(得分:0)

您可以在反应导航中使用them

现在可以将导航器的静态配置选项中指定的颜色指定为带有明暗键的对象:

示例

const ThemeContext = React.createContext(null);
const ThemeConstants = {
  light: {
    backgroundColor: '#fff',
    fontColor: '#000',
  },
  dark: {
    backgroundColor: '#000',
    fontColor: '#fff',
  },
};

let Tabs = createBottomTabNavigator(
  {
    /* routes */
  },
  {
    tabBarOptions: {
      activeTintColor: ThemeConstants[theme].activeTintColor,
      inactiveTintColor: ThemeConstants[theme].inactiveTintColor,
    },
  }
);

请参见more information

相关问题