在 React Native 中创建阴影设计答案

【问题标题】：Creating shadow design in react native在 React Native 中创建阴影设计
【发布时间】：2020-02-06 21:33:51
【问题描述】：

我正在尝试在 react-native 中创建一个 UI，如下图所示：

到目前为止，我只能这样做：

但是有什么合适的方法吗？

  <View style={styles.frame1}>
    <View  style={styles.frameBefore}></View>
    <View style={styles.frame2}>
      <TextInput/>
    </View>
  </View>

  frame1: {
    flexDirection: 'row',
    margin: 10,
    borderColor: LightColorLine,
    borderStyle:'solid',
    borderWidth: 0.5,
    backgroundColor: LightColorBackgr,
    padding:10,
  },
  frame2:{
    backgroundColor: LightColorTextBackgr,
    padding: -50,
    flex: 0.98,
  },
  frameBefore:{
    width: 0,
    height: 60,
    borderRightWidth: 0.9,
    borderColor: LightColorLine,
    borderStyle:'solid',
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    flex: 0.01,
    transform: [{ 
      rotate: '45deg'
    }]
  },

【问题讨论】：

标签： javascript reactjs react-native shadow

【解决方案1】：

Here 是我能得到的最接近的

棘手的部分是在一个角度上创建阴影，特别是考虑到 API 的 React-Native 提供的阴影在 iOS 和 Android 之间存在很大差异。

为了克服这个问题，我使用了 React Native 默认不包含的线性渐变。我使用了expo-linear-gradient，但如果您愿意，也可以使用其他一些。

export const Triangle = props => (
  <View style={props.style}>
    <LinearGradient
      colors={['black', 'transparent']}
      start={[0, 0]}
      end={[0.5, 0.5]}
      style={styles.triangleShadow}
    />
    <View style={styles.triangle} />
  </View>
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.card}>
          <Text style={styles.text}>Be Cool.</Text>
          <Triangle style={styles.topLeftTriangle} />
          <Triangle style={styles.bottomRightTriangle} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 32,
  },
  text: {
    fontSize: 18,
    padding: 32,
    paddingVertical: 48,
    fontWeight: 'bold',
    borderWidth: 1,
    backgroundColor: '#F66F6F',
    color: 'white',
    borderColor: 'gray',
  },
  card: {
    borderWidth: 1,
    padding: 8,
    borderColor: 'gray',
  },
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 80,
    borderTopWidth: 80,
    borderRightColor: 'transparent',
    borderTopColor: '#ecf0f1',
  },
  triangleShadow: {
    height: 90,
    width: 90,
    position: 'absolute',
    top: 0,
    left: 0,
  },
  topLeftTriangle: {
    position: 'absolute',
    top: -10,
    left: -10,
  },
  bottomRightTriangle: {
    position: 'absolute',
    bottom: -10,
    right: -10,
    transform: [{ rotate: '180deg' }],
  },
});

【讨论】：