Question

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

＆＃13;

  <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"
            />}
        />

＆＃13;

这是我的结果：

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

Answer 1

NavigationBar中的文本颜色由背景颜色决定。如果背景颜色足够黑，NavigationBar会将其组件切换到＆＃34; light-content＆＃34;，如下所示：

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

1 个答案: