在 React Native 中更改应用程序背景颜色

Question

我正在尝试将我的反应本机应用程序中的背景颜色从灰色更改为白色。渲染后，我正在使用 react-navigation 制作 TabNavigator。我试图把这个 TabNavigator 放在一个视图中并设置 backgroundColor 但所有屏幕都变成了白色。我该如何解决这个问题？

index.js

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

标签

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

主屏幕

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>
    );
  }

原文由 Grigore Budac 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Grigore Budac 发布，翻译遵循 CC BY-SA 4.0 许可协议