Css 在 React Native 中创建背景

<View style={{justifyContent: 'center', alignItems: 'center'}}>
                <Image
                  style={tabStyle.iconSize}
                  source={require('../assets/List-icon-1.png')}
                />
                <Image
                  style={tabStyle.arrowSize}
                  source={require('../assets/Arrow-1-1.png')}
                />
              </View>

const tabStyle = StyleSheet.create({
iconSize: {
height: 35,
width: 35,
marginBottom: 5,
},
arrowSize: {
height: 17,
width: 15,
marginBottom: 5,
},
});

yarn add react-native-linear-gradient

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

import LinearGradient from 'react-native-linear-gradient';

// Within your render function
<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',
  },
});

Css相关问答推荐

为什么盒影没有显示在我的Angular组件中？

单独.css文件中的样式不适用于Angular 元件

如何将此 Select 器转换为TailWind类

如何使用DirectusImage标签作为背景？

如何从 WooCommerce 中的 Betheme 图像中删除产品永久链接图标

Django：Tailwind 样式不适用于具有小部件属性的模板变量

滚动弹性盒

为什么 width： 100% 在 Flex 父级中缩小这个 div ？

在R shiny中 Select DT表格值的背景 colored颜色 (无条件的自由 Select )

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字？

在 SVG 元素上方添加标签而不移动 SVG 元素

我无法覆盖 react ui 库中的组件样式

如何禁用亚像素渲染或强制浏览器将属性舍入到最近的像素？

在所有移动设备中禁用滚动

悬停效果：展开底部边框

在 Firefox 中删除额外的按钮间距/填充

将未知大小的大图像居中在一个较小的 div 中，并隐藏溢出

使用自定义 CSS 在 WebView 中呈现 HTML

我应该如何组织我的 CSS 文件的内容？

带有一些 LESS 魔法的花式媒体查询