我正在try 在react-native 应用程序中将背景 colored颜色 从灰色更改为白色.我正在使用react navigation在渲染后生成TabNavigator.我试着把这个TabNavigator放在一个视图中并设置背景色,但所有的屏幕都变成了白色.我该怎么解决这个问题?

index.js

...
render() {
    return (
        <View style={{ backgroundColor: '#FFFFFF'}}>
            <Tabs />
        </View>
    )
  }
...

Tabs

...
const Tabs = TabNavigator(
  {
    Home: {
      screen: HomeStack,
      navigationOptions: {
        title: 'Acasa',
      },
    },
    ...
    Account: {
      screen: AccountScreen,
      navigationOptions: {
        title: 'Contul meu',
      },
    },
  },
  {
    tabBarComponent: props => <FooterNavigation {...props} />,
    tabBarPosition: 'bottom',
    initialRouteName: 'Home',
  },
);
...

Home Screen

render() {
    const {
      data, refreshing, loading, error,
    } = this.state;

    return (
      <ScrollView>
        <Container>
          {error && <Text>Error</Text>}
          {loading && <ActivityIndicator animating size="large" />}

          <List>
            <FlatList
              data={data}
              renderItem={({ item }) => (
                <ListItem onPress={() => this.props.navigation.navigate('Item', item)}>
                  <Item data={item} />
                </ListItem>
              )}
              // ID from database as a key
              keyExtractor={item => item.title}
              ItemSeparatorComponent={this.renderSeparator}
              ListFooterComponent={this.renderFooter}
              ListHeaderComponent={this.renderHeader}
              refreshing={refreshing}
              onRefresh={this.handleRefresh}
              onEndReached={this.handleLoadMore}
              onEndReachedThreshold={0}
            />
          </List>
        </Container>
      </ScrollView>
    );
  }

推荐答案

我已经解决了我的问题,它是由StackNavigator引起的.要解决这个问题,只需添加一些额外的选项

    const HomeStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Item: {
      screen: ItemScreen,
      navigationOptions: ({ navigation }) => ({
        title: `${navigation.state.params.title}`,
      }),
    },
  },
  **
  {
    headerMode: 'screen',
    cardStyle: { backgroundColor: '#FFFFFF' },
  },
  **
);

React-native相关问答推荐

如何停止在Expo路由中将新文件显示为菜单列表?

PubNubReact无法工作,因为它已被废弃

ReactNative如何在填充编辑表单 timeshift 除按钮禁用状态

防止 React Native 在上下文值更改时重新安装组件

如何在底部标签导航中添加顶部标签

React-native 重置数据库

从 React-Native 应用程序中的另一个类访问静态变量?

React Native StackNavigator 初始路由名称

React Native WebView 中的 Javascript console.log()

如何重置react-native 动画?

可以在没有 await 关键字的情况下调用异步函数吗?

在react native 中出现Cannot read property 'pick算法rithm' of null错误

React Native with Typescript and Jest 在 0.57 更新后被 destruct :Couldn't find preset "module:metro-react-native-babel-preset" relative to directory

React native + redux-persist:如何忽略键(黑名单)?

如何将 Crashlytics 与 React Native 应用程序集成

如何将props传递给 React Navigation 导航器中的组件?

Android Log

如何在 react-native 中重叠

如何在 Android 手机上运行 React Native 应用程序

React Native:无法解析模块 fs