反应本机TextInput框阴影

时间:2018-12-16 10:09:42

标签: react-native react-native-textinput

我想在TextInput上应用阴影,如下所示: enter image description here

我正在使用Android的阴影和高程来制作这种样式:

shadowColor: colors.shadowColor,
    shadowOpacity: 0.5,
    shadowRadius: 3,
    shadowOffset: {
      height: 0,
      width: 0,
    },
    elevation: 2,

但是,结果不符合预期。因此,我想问是否有一种方法可以增强它,而无需通过第三方包装。 enter image description here

1 个答案:

答案 0 :(得分:2)

我最终使用了react-native-cardview包,结果要好得多,但是,它是如此有限,以至于我无法设置阴影颜色和其他选项。

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>
    );
  }
}

enter image description here