在React Native中，是否可以使用渐变色为Android状态栏设置背景颜色？

Question

我正在尝试使用react-native为Android状态栏设置渐变颜色。但是，setBackgroundColor只能接受颜色字符串。

是否有可能使用渐变颜色来设置状态栏颜色？

- Yauhen

Answer 1

你可以在 StatusBar 上使用 translucent={true} 和 backgroundColor={'transparent'} 属性，并将它们与 react-native-linear-gradient 组合使用，像这样：

 <LinearGradient colors={["#79e3fe","#635df8","#42385D"]}  style={{flex: 1}}>
    <StatusBar translucent={true} backgroundColor={'transparent'} />
  </LinearGradient >

- Rondev

---

请使用 https://www.npmjs.com/package/react-native-status-bar-height 来获取状态栏的高度，以便将其用于分离标题栏和状态栏。 - Akshay Mulgavkar

Answer 2

您可以进行微调。

在我的情况下，我使用wix/react-native-navigation在应用程序中导航到不同的屏幕。因此，我使用以下选项来显示我的屏幕。

navigatorStyle: { navBarHidden: true, statusBarColor: 'transparent', drawUnderStatusBar: true },

然后您需要导入react-native-linear-gradient来微调您的状态栏。（创建组件并将其添加到您的页面）

<View>
    <LinearGradient colors={yourArrayOfColors} style={styles.header}/>

</View>

... //and in your style
header: {
        height: (Platform.OS === 'ios' ? 20 : StatusBar.currentHeight),
}

那可能有用！

- zagoa

Answer 3

以下步骤对我很有帮助：

1. 将React Navigation作为React Native的根组件添加。

2. 创建自定义标题并为其制作渐变背景。当然需要使用react-native-linear-gradient。以下代码演示了如何实现。

// @flow
import React from "react";
import { View, Platform, StatusBar } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Header, StackViewTransitionConfigs } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";

import MainScreen from "./MainScreen";

const GradientBackground = props => (
<LinearGradient
  colors={["#FFD801", "#FF8040"]}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
  {...props}
/>
);

const AppNavigator = createStackNavigator(
{
  MainScreen: { screen: MainScreen }
},
{
  headerBackTitleVisible: false,
  initialRouteName: "MainScreen",
  defaultNavigationOptions: {
    header: props => {
      return (
        // When StatusBar is translucent, the StatusBar will be offset up by "StatusBar.currentHeight" points.
        // That's why the height of the Header is "Header.HEIGHT + StatusBar.currentHeight".
        <View style={{ height: Header.HEIGHT + StatusBar.currentHeight }}>
          <GradientBackground style={{ height: StatusBar.currentHeight }} />
          <Header {...props} />
        </View>
      );
    },
    headerTintColor: "#FFF",
    headerBackground: (
      <GradientBackground style={{ height: Header.HEIGHT }} />
    ),
    headerStyle: {
      backgroundColor: "transparent"
    }
  },
  headerLayoutPreset: "center"
}
);

const MainStack = createAppContainer(AppNavigator);

export default MainStack;

将StatusBar添加到根组件并将其设置为半透明。"最初的回答"

// @flow
// @format
import React, { Component } from "react";
import { Button, TextInput, StyleSheet, StatusBar } from "react-native";
import { View, Text, FlatList } from "react-native";
import { NavigationScreenProp, NavigationState } from "react-navigation";

type Props = {
navigation: NavigationScreenProp<NavigationState>
};

/**
* 程序主页
* @export MainScreen
* @class MainScreen
* @extends {Component}
*/
export default class MainScreen extends Component<Props> {
static navigationOptions = {
  headerTitle: "MainScreen"
};

render() {
  const { navigation } = this.props;
  return (
    <View style={[styles.screenContainer]}>
      <StatusBar
        barStyle="light-content"
        translucent={true}
        backgroundColor="transparent"
      />
    </View>
  );
}
}

const styles = StyleSheet.create({
screenContainer: {
  flex: 1
}
});

4. Enjoy!

5. 如果上面的描述不清楚，请随时下载ReactNavigationGradientStatusbar项目并查看。

6.

（注：Original Answer翻译成“最初的回答”）

- yancaico

Answer 4

1. 将 react-native-linear-gradient 添加到您的项目中

2. 使用以下代码：

import {View , StyleSheet,StatusBar} from 'react-native'
import LinearGradient from 'react-native-linear-gradient';


    render(){
        const StatusBarHeight = StatusBar.currentHeight
        return(
            <View>
                <View style={{ height : StatusBarHeight , width : '100%' }}>
                    <LinearGradient 
                        start={{x: 0.0, y: 0.5}} 
                        end={{x: 0.5, y: 1.0}} 
                        locations={[0,0.3,0.6]}
                        colors={['#4c669f', '#3b5998', '#192f6a']} style={style.Container}>
                    </LinearGradient>
                </View>
                
            </View>
        )
    }

这是什么意思？请提供更多上下文。

const style = StyleSheet.create({
    Container : {
        flex : 1,
        backgroundColor : '#2980b9',
        justifyContent : 'center',
        alignItems : 'center',
        flexDirection : 'row'
    }
})

- sinasho

Answer 5

如果你在你的应用中使用'react-native-safe-area-context'。

你可以使用react-native-safe-area-context中的SafeAreaView。

1. 从react-native-safe-area-context中导入SafeAreaView;

import { SafeAreaView } from 'react-native-safe-area-context';

2. 将SafeAreaView包装在LinearGradient中。你可以将你的Header组件放在LinearGradient内部。

<LinearGradient colors={["#78e3fe","#335df8"]}>
   <SafeAreaView edges={['right', 'top', 'left']}/>
   <Header/>
</LinearGradient >

这个东西对我有用。希望它也能帮到你。

- sai rohith

Answer 6

正如文档所述，目前它只接受字符串，因此不行。而且，我甚至无法想出一个使用渐变在状态栏上的应用程序。

如果StatusBar可以接受组件，您可以尝试使用Expo.io API来实现。如果您对此感到好奇，请查看https://docs.expo.io/versions/latest/sdk/linear-gradient.html。

- EnriqueDev