React native 如何在React Native中实现无模糊的阴影

我是使用React-Native的新手，我正在尝试映射以下组件（在web中制作），但对于React-Native没有成功：

高程和阴影属性不起作用，因为它们会给生成的阴影添加一些模糊。哪种方法才是正确的处理方法

关于使用

import React，{Component}来自'React'；
进口{
看法
滚动视图，
文本输入，
}从“反应本机”；
从“react native CardView”导入CardView；
从“./styles”导入样式；
导出默认类注册扩展组件{
render（）{
返回(
);
}
}

使用

import React，{Component}来自'React'；
进口{
看法
滚动视图，
文本输入，
}从“反应本机”；
从“react native CardView”导入CardView；
从“./styles”导入样式；
导出默认类注册扩展组件{
render（）{
返回(
);
}
}

编辑： 对于动态高度，两行或两行以上的文字，如评论中所要求的，我不得不使用另一种解决方法

以前的帖子

有点黑，但如果你绝对不想模糊，你可以这样做

编辑： 对于动态高度，两行或两行以上的文字，如评论中所要求的，我不得不使用另一种解决方法

以前的帖子

有点黑，但如果你绝对不想模糊，你可以这样做

---

谢谢你抽出时间！但我有一个问题，这个解决方案是否适用于动态高度？我们可以用动态文本编写一个组件，使其溢出容器并扩展到新行。在这种情况下，topView的高度将更高。RegardsAs是动态的，不是动态的。我根据你的需要编辑了这篇文章。谢谢你抽出时间！但我有一个问题，这个解决方案是否适用于动态高度？我们可以用动态文本编写一个组件，使其溢出容器并扩展到新行。在这种情况下，topView的高度将更高。RegardsAs是动态的，不是动态的。我根据你的需要编辑了这篇文章。

import React, { Component } from 'react';
import {
  View,
  ScrollView,
  TextInput,
} from 'react-native';
import CardView from 'react-native-cardview';
import styles from './styles';

export default class Signup extends Component {

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: colors.whiteColor }}>
        <ScrollView contentContainerStyle={styles.signupContainer}>
            <View style={styles.signupInputs}>
              <CardView
                style={styles.cardStyle}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}
              >
                <TextInput
                  underlineColorAndroid="transparent"
                  style={[styles.signupInput, styles.commonsignupStyle]}
                  placeholder="Nom *"
                  placeholderTextColor={colors.primaryColor}
                />
              </CardView>
              <CardView
                style={styles.cardStyle}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}
              >
                <TextInput
                  underlineColorAndroid="transparent"
                  style={[styles.signupInput, styles.commonsignupStyle]}
                  placeholder="Prénom *"
                  placeholderTextColor={colors.primaryColor}
                />
              </CardView>
            </View>
        </ScrollView>
      </View>
    );
  }
}

const Label = () => {
  return <View style={{width: 100, height: 50}}>
           <View style={styles.topView}>
             <Text>Hello world</Text>
             <Text>Hi world</Text>
           </View>
           <View style={styles.shadowView} >
              <Text style={{color: 'transparent'}}>Hello world</Text>
             <Text style={{color: 'transparent'}}>Hi world</Text>
           </View>
        </View>;
}

const styles = StyleSheet.create({
  topView: {
    width: '100%',
    position: 'absolute',
    top: 0, backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 25,
    },
  shadowView: {
    position: 'absolute',
    top: 3,
    width: '100%',
    zIndex: -10,
    borderRadius: 17,
    backgroundColor: '#ddd'}
});

const Label = () => {
  return <View style={{width: 100, height: 30}}>
           <View style={styles.topView}>
             <Text>Hello world</Text>
           </View>
           <View style={styles.shadowView} />
        </View>;
}