【问题标题】:Does React Native styles support gradients?React Native 样式是否支持渐变?
【发布时间】:2015-08-15 18:31:35
【问题描述】:

我看到有人为此做了这个:https://github.com/brentvatne/react-native-linear-gradient

但是 RN 本身是否支持它?类似的东西

style = StyleSheet.create({
    backgroundGradient: "vertical",
    backgroundGradientTop: "#333333",
    backgroundGradientBottom: "#666666"
});

【问题讨论】:

    标签: react-native


    【解决方案1】:

    暂时没有。您应该使用您链接的库;他们最近添加了 Android 支持,这是 react-native 的主要贡献者之一。

    【讨论】:

      【解决方案2】:

      只需将您的渐变导出为 SVG 并使用react-native-svg 使用它,在您导入组件后设置宽度和高度以及preserveAspectRatio="xMinYMin slice" 以根据您的需要缩放 SVG 渐变。

      【讨论】:

      • 这个答案也值得评论?。数百名开发人员使用 react-native-svg 库,并且仍然安装更多具有重复功能的库?。我震惊地向下滚动,没有人提到它,并认为我可能是最聪明的??‍♂️。
      • 同意@AlexShtromberg Smartest 解决方案,无需额外的库。值得更多的支持。
      • preserveAspectRatio="xMinYMin slice" 哇哦。太棒了。
      【解决方案3】:

      首先,运行npm install expo-linear-gradient --save

      您不需要使用动画标签,但这是我在代码中使用的。

      colors={[ put your gradient colors ]}

      那么你可以使用这样的东西:

       import { LinearGradient } from "expo-linear-gradient";
       import { Animated } from "react-native";
      
       <AnimatedLinearGradient
          colors={["rgba(255,255,255, 0)", "rgba(255,255,255, 1)"]}
          style={{ your styles go here }}/>
      
      const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
      

      【讨论】:

        【解决方案4】:

        这是适用于 iOS 和 Android 平台的渐变的不错选择:

        https://github.com/react-native-community/react-native-linear-gradient

        还有其他方法,例如 expo,但是 react-native-linear-gradient 对我来说效果更好。

        <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
          <Text style={styles.buttonText}>
            Sign in with Facebook
          </Text>
        </LinearGradient>
        
        // Later on in your styles..
        var styles = StyleSheet.create({
          linearGradient: {
            flex: 1,
            paddingLeft: 15,
            paddingRight: 15,
            borderRadius: 5
          },
          buttonText: {
            fontSize: 18,
            fontFamily: 'Gill Sans',
            textAlign: 'center',
            margin: 10,
            color: '#ffffff',
            backgroundColor: 'transparent',
          },
        });
        

        【讨论】:

          【解决方案5】:

          这是一个生产就绪的纯 JavaScript 解决方案:

          <View styles={{backgroundColor: `the main color you want`}}>
              <Image source={`A white to transparent gradient png`}>
          </View>
          

          这是使用此解决方案的 npm 包的源代码: https://github.com/flyskywhy/react-native-smooth-slider/blob/0f18a8bf02e2d436503b9a8ba241440247ef1c44/src/Slider.js#L329

          这是使用此 npm 包的饱和度和亮度的渐变调色板屏幕截图: https://github.com/flyskywhy/react-native-slider-color-picker

          【讨论】:

            【解决方案6】:

            寻找一个类似的解决方案我刚刚遇到了这个全新的教程,它可以让您在逐步完成每个步骤以获得一个工作的 React 组件的同时连接一个 Swift 渐变背景 (https://github.com/soffes/GradientView) 库。

            这是一个循序渐进的教程,允许您通过将 swift 和 objective-c 组件桥接到可用的 React Native 组件来构建自己的组件,该组件覆盖标准 View 组件并允许您定义像以下:

             <LinearGradient 
               style={styles.gradient} 
               locations={[0, 1.0]} 
               colors={['#5ED2A0', '#339CB1']}
             />
            

            你可以在这里找到教程:http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/

            【讨论】:

            • 最好在您的答案中包含尽可能多的链接站点。就目前而言,它可能会作为“仅限链接”的答案被删除。查看“如何给出一个好的答案”的常见问题解答。干杯。
            【解决方案7】:

            React Native 还没有提供渐变色。但是,您仍然可以使用名为 react-native-linear-gradient 的 NPM 包来实现,也可以使用 click here for more info

            1. npm install react-native-linear-gradient --save

            2. 在您的应用程序文件中使用import LinearGradient from 'react-native-linear-gradient';

            3. &lt;LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}&gt; &lt;Text&gt; Your Text Here &lt;/Text&gt; &lt;/LinearGradient&gt; 

            【讨论】:

              【解决方案8】:

              EXPO? 那么,在使用 EXPO 的 React Native 中使用这种方法 Linear Gradient(2021 年 11 月更新)

              没有 Pod 安装,没有错误,没有额外的链接文件。

              expo install expo-linear-gradient
              

              然后

              import { LinearGradient } from 'expo-linear-gradient';
              
              <View style={styles.container}>
                    <LinearGradient
                      // Background Linear Gradient
                      colors={['rgba(0,0,0,0.8)', 'transparent']}
                      style={styles.background}
                    />
                    <LinearGradient
                      // Button Linear Gradient
                      colors={['#4c669f', '#3b5998', '#192f6a']}
                      style={styles.button}>
                      <Text style={styles.text}>Sign in with Facebook</Text>
                    </LinearGradient>
                  </View>
              

              完整链接:https://docs.expo.dev/versions/latest/sdk/linear-gradient/

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2018-03-17
                • 1970-01-01
                • 2017-08-18
                • 2011-04-02
                • 2012-02-14
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多