我来帮你分析下问题出在哪：你把TabNavigator放在一个设置了白色背景的外层View里，这个View会占满整个屏幕空间，所以不仅页面内容区域，连底部的Tab栏也被这个白色背景覆盖了，这就是为什么整个屏幕都变成了白色。

下面是几个更精准的解决方案，帮你实现“页面内容背景为白色，同时保留Tab栏原有样式”的需求：

方法一：给单个屏幕组件设置背景色 #

直接在每个Tab对应的页面组件中，给最外层容器设置白色背景，这样只有页面内容区域会变成白色，Tab栏不受影响。

以你的HomeScreen为例，修改Container的样式：

// Home Screen
render() {
  const { data, refreshing, loading, error, } = this.state;
  return (
    <ScrollView>
      {/* 给Container添加背景色样式 */}
      <Container style={{ backgroundColor: '#FFFFFF' }}>
        {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>
            )}
            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>
  );
}

同样的，在AccountScreen的最外层容器也添加相同的背景色设置即可。

方法二：通过TabNavigator全局配置页面背景 #

如果你想让所有Tab页面统一使用白色背景，可以在TabNavigator的配置项里设置cardStyle，这样无需逐个修改屏幕组件：

const Tabs = TabNavigator(
  {
    Home: {
      screen: HomeStack,
      navigationOptions: { title: 'Acasa' },
    },
    // 其他路由...
    Account: {
      screen: AccountScreen,
      navigationOptions: { title: 'Contul meu' },
    },
  },
  {
    tabBarComponent: props => <FooterNavigation {...props} />,
    tabBarPosition: 'bottom',
    initialRouteName: 'Home',
    // 添加全局屏幕样式配置
    screenOptions: {
      cardStyle: { backgroundColor: '#FFFFFF' }
    }
  }
);

cardStyle会作用于每个Tab对应的页面容器，自动为所有页面设置白色背景。

方法三：确保自定义Tab栏的背景样式 #

如果你的FooterNavigation（自定义Tab栏）背景是透明的，即使你设置了页面背景，Tab栏区域也会透出外层的颜色。所以如果想让Tab栏保持原来的灰色，需要在FooterNavigation组件中明确设置背景色：

const FooterNavigation = (props) => {
  return (
    {/* 设置Tab栏的灰色背景，替换成你需要的灰色值 */}
    <View style={{ backgroundColor: '#E0E0E0', height: 60, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
      {/* 这里是你的Tab按钮内容 */}
    </View>
  );
};

最后记得移除外层包裹Tabs的那个View，它就是导致整个屏幕变白的根源~

内容的提问来源于stack exchange，提问作者Grigore Budac