- React Native Android 阴影不显示问题
- react-native-baidu-map MarkerI
- run-android : Configuration with
- 解决React Native的Android端gif图片显示以及
- React native(iOS)打包之后Image不显示问题
- [RN坑]com.android.ddmlib.InstallE
- React Native Android之原生UI组件动态add
- react-native flatlist 下拉刷新组件
- React Native在Android当中实践(二)——搭建开
- React Native在Android当中实践(三)——集成到
使用插件:react-native-shadow
1.安装 react-native-shadow
npm install react-native-shadow
2.安装react-native-svg
npm install react-native-svg
3.将react-native-svg链接如项目
react-native link react-native-svg
4.demo代码
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TouchableOpacity} from 'react-native';
import {BoxShadow} from 'react-native-shadow'
export default class App extends Component {
render() {
const shadowOpt = {
width:160,
height:30,
color:"#000000",
border:2,
radius:5,
opacity:1,
x:1,
y:1,
}
return (
<View style={styles.container}>
<BoxShadow setting={shadowOpt}>
<TouchableOpacity >
<View style={{width:160,height:30,justifyContent:"center",alignItems:"center"}}>
<Text style={{color:"#ffffff"}}>
点击
</Text>
</View>
</TouchableOpacity>
</BoxShadow>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
}
});
效果图:
网友评论