时间戳

首页 > 解决方案 > 我需要像这个按钮这样的 Box shadow 属性来反应原生

android - 我需要像这个按钮这样的 Box shadow 属性来反应原生

问题描述

在此处输入图像描述我使用此属性但无法工作 

shadowColor: "#000",
    shadowOffset: {
        width: 0,
        height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    elevation: 5,

标签： androidcssreact-native

解决方案

React-Native Button 组件没有 style 属性。如果要自定义按钮样式，则必须使用TouchableOpacity或创建自定义按钮TouchableNativeFeedback。

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.buttonStyle}>
        <Text style={styles.textStyle}>OK</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonStyle: {
    width: '80%',
    padding: 10,
    backgroundColor: '#E13C17',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  textStyle: {
    textAlign: 'center',
    color: '#FFF',
    fontSize: 18,
  },
});

希望这对您有所帮助。随意怀疑。

推荐阅读