时间戳

首页 > 解决方案 > 如何在反应原生中添加框和文本之间的渐变

react-native - 如何在反应原生中添加框和文本之间的渐变

问题描述

在反应原生应用程序中，我想在框和文本之间添加渐变。

图片 ：

在此处输入图像描述

预期图像：

在此处输入图像描述

编码 ：

<View style={{backgroundGradientBottom: "#666666",width:Dimensions.get('window').width-30}}>
  <Text  numberOfLines={5} style={{fontSize: 20,marginBottom:15,marginTop:20,fontFamily:''}}>{firstParagraph}</Text>
<View style={ {justifyContent: 'center',alignItems: 'center',  height: 300,  borderWidth: 2,marginBottom:15 }}>
 <Text   style={{fontSize: 20,marginBottom:15}}>Weiterlesen mit Tageblatt-Premium</Text>
 <Text   style={{textAlign: "center",fontSize: 16,marginBottom:15,marginTop:20}}>Jetzt 24 Stunden kostenlos und unverbindlich testen</Text>
 <View style = {{alignSelf: 'center',marginBottom:15,marginTop:20}}  >
  <Button style={{alignSelf: 'center',marginTop:10,backgroundColor: 'red',padding:15}}   >
   <Text style={{ color: 'white'}}>24 STUNDEN GRATIS-TEST</Text>
  </Button>
 </View>
<View
style={{
borderBottomColor: "black",
borderBottomWidth: 1,
alignSelf:'stretch',
marginHorizontal:15
}}
/>
<View style={{ marginHorizontal:15,alignSelf: 'flex-start',flexDirection: 'row'}}>
  <Text   style={{ fontSize: 14 }} >Bereits abonniert?</Text>
  <Text   style={{marginLeft:120,alignSelf: 'flex-end',fontSize: 14,textDecorationLine: 'underline' }} >Anmelden</Text>
</View>
</View>
   </View>

标签： react-native

解决方案

React Native 默认不支持渐变，需要你自己使用react-native-linear-gradient。

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

推荐阅读