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

inkz8wg9 于 2023-08-07 发布在 React

关注(0)|答案(7)|浏览(171)

我正在尝试将React Native应用程序中的背景颜色从灰色更改为白色。我使用 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>
        );
      }

型

react-native

来源：https://stackoverflow.com/questions/50619693/change-app-background-color-in-react-native

7条答案

按热度按时间

bgtovc5b1#

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

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

字符串

赞(0）回复(0）举报 2023-08-07

8e2ybdfx2#

React Navigation 5及以上版本

<Stack.Navigator
        initialRouteName='dashboard'
        screenOptions={{
            headerStyle: { elevation: 0 },
            cardStyle: { backgroundColor: '#fff' }
        }}
    >
        <Stack.Screen name="Home" component={HomeStack} />
    </Stack.Navigator>

字符串
React Navigation 4及更早版本

const HomeStack = StackNavigator({
        Home: {
            screen: HomeScreen,
        },
    },
    {
        headerMode: 'screen',
        cardStyle: { backgroundColor: '#fff' },
    },
    );

型

赞(0）回复(0）举报 2023-08-07

slwdgvem3#

对于React Navigation 6，

<Stack.Navigator  screenOptions={{
     contentStyle:{
       backgroundColor:'#FFFFFF'
     }
  }}  initialRouteName="Home">

字符串

赞(0）回复(0）举报 2023-08-07

fruv7luv4#

像这样编辑View标签，

<View style={{flex: 1,backgroundColor: '#6ED4C8'}}></View>

字符串

赞(0）回复(0）举报 2023-08-07

bvuwiixz5#

由于不推荐使用，以下内容将不再起作用。

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

字符串
现在必须使用defaultNavigationOptions（见下文）。

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

型

赞(0）回复(0）举报 2023-08-07

ax6ht2ek6#

要设置的正确 prop 是sceneContainerStyle：

<BottomTab.Navigator
    ...
    sceneContainerStyle={{ backgroundColor: 'white' }}
  >
      ...
   </BottomTab.Navigator>

字符串

赞(0）回复(0）举报 2023-08-07

lh80um4z7#

设置在视图中，这是你要设置背景颜色的位置

view: {
  backgroundColor: '#FFFFFF' 
}

字符串

赞(0）回复(0）举报 2023-08-07

我来回答

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

7条答案

相关问题

热门标签

最新问答