Question

我正在尝试使用react-native为android状态栏设置渐变颜色。但是setBackgroundColor正在使用颜色字符串。

是否可以将渐变颜色用于状态栏颜色？

Answer 1

您可以将translucent={true}和backgroundColor={'transparent'}属性与StatusBar一起使用，并用react-native-linear-gradient包装它们像这样：

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

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

这可以做到这一点！

Answer 3

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

使用此代码：

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

Answer 4

正如文档所述，它只接受一个字符串，所以不，你不能。此外，我甚至无法在状态栏上使用渐变来提出应用程序。

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

Answer 5

通过以下步骤可以解决我的问题。

添加React Navigation作为React Native的根组件。
创建一个自定义标题，并为其创建渐变背景。当然需要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添加到根组件，并将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
}
});

享受！
如果您不清楚上面的描述，请随时下载ReactNavigationGradientStatusbar Project并签出。

是否有可能使用渐变颜色的android状态栏与react-native？

5 个答案: