美文网首页
React Native Android 阴影不显示问题

React Native Android 阴影不显示问题

作者: Volon | 来源:发表于2019-06-23 08:40 被阅读0次

    使用插件: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',
      }
    });
    
    

    效果图:


    相关文章

      网友评论

          本文标题:React Native Android 阴影不显示问题

          本文链接:https://www.haomeiwen.com/subject/xlnjqctx.html