在react native中创建背景

bis0qfac 于 2022-12-14 发布在 React

关注(0)|答案(2)|浏览(146)

我有一个底部的酒吧，我想添加这个kind of background in react native目前它looks like this。
我如何做到这一点？
这是我当前的代码

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

react-native

来源：https://stackoverflow.com/questions/74783460/create-a-backdrop-in-react-native

2条答案

按热度按时间

uemypmqf1#

您需要一个组件来完成此操作。
使用Yarn

yarn add react-native-linear-gradient

使用Npm

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

如果不起作用，你可以寻求帮助

赞(0）回复(0）举报 2022-12-14

oknwwptz2#

您可以在tabBar组件的tabBar选项属性中对此进行自定义

tabBarOptions={{
       activeTintColor: '#fff',
       inactiveTintColor: '#fff',
       activeBackgroundColor: 'transparent',
       inactiveBackgroundColor: '#fff',
           style: {
                 backgroundColor: '#white',
               
           }
    }}
>

赞(0）回复(0）举报 2022-12-14

我来回答

在react native中创建背景

2条答案

相关问题

热门标签

最新问答