react-native - 我如何为彩色图标导航栏充电@shoutem/ui

Question

我试图创建 react native 项目和 UI 扩展 @shoutem/ui 的组件，但是当我使用 @shoutem/ui 的 NavigationBar 时，我无法更改 NavigationBar 内内容的颜色，如下图所示，新闻总是变成黑色，如何将其更改为白色？这是我的代码：

  <NavigationBar
          style={{
            container: {
              position: 'relative',
              width: Dimensions.get('window').width,
            }
          }}
          leftComponent={(
            <TouchableOpacity
              style={{ paddingLeft: 10 }}
              onPress={() => { this.props.navigation.navigate('DrawerOpen'); }}
            >
              <Image
                styleName="small-avatar"
                source={{ uri: 'https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-1/p160x160/17021999_1653807211588081_745686882439263143_n.jpg?oh=1dc68f938a820a9ccfea09033c0f4e34&oe=5987630B' }}
              />
            </TouchableOpacity>
          )}
          centerComponent={
            <DropDownMenu
              selectedOption={this.state.selectedChannel ?
                this.state.selectedChannel : this.state.channel[0]}
              options={this.state.channel}
              onOptionSelected={(channel) => this.onChoiceChannel(channel)}
              titleProperty="name"
              valueProperty="id"
            />}
        />

这是我的结果：

请帮我解决这个问题！或者建议我以某种方式解决它！非常感谢你们！

Answer 1

NavigationBar 中的文本颜色由背景颜色决定。如果背景颜色足够深，NavigationBar 会将其组件切换为“浅色内容”，如下所示：

AppName/node_modules/@shoutem/ui/components/NavigationBar.js

function chooseBarStyle(bgColor) {
  return color(bgColor).isDark() ? 'light-content' : 'default';
}

如果要手动编辑颜色，则必须编辑：AppName/node_modules/@shoutem/ui/theme.js

title: {
  fontFamily: 'Rubik-Regular',
  fontStyle: 'normal',
  fontWeight: 'normal',
  fontSize: 20,
  color: '#222222', //edit color here for your Title
}

编辑以回应评论：

图标颜色也编辑在：

AppName/node_modules/@shoutem/ui/theme.js

navBarIconsColor: '#222222' //edit this line for your Icon