怎么收费彩色图标导航栏@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 会将其组件切换为 "light-content"，如：

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

怎么收费彩色图标导航栏@shoutem/ui

How can i charge color icon navigation bar @shoutem/ui

react-native

shoutem