React native TextInput box-shadow

Question

我想在TextInput上应用阴影,如下所示:

我正在制作这种风格,使用阴影和海拔为android:

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

但是,结果并不像预期的那样.所以,我问是否有办法在不通过第三方包的情况下增强它.

Answer 1

我最终使用了react-native-cardview包，结果好多了，但是，它非常有限，我无法设置阴影颜色和其他选项。

\n\n

import React, { Component } from \'react\';\nimport {\n  View,\n  ScrollView,\n  TextInput,\n} from \'react-native\';\nimport CardView from \'react-native-cardview\';\nimport styles from \'./styles\';\n\nexport default class Signup extends Component {\n\n  render() {\n    return (\n      <View style={{ flex: 1, backgroundColor: colors.whiteColor }}>\n        <ScrollView contentContainerStyle={styles.signupContainer}>\n            <View style={styles.signupInputs}>\n              <CardView\n                style={styles.cardStyle}\n                cardElevation={2}\n                cardMaxElevation={2}\n                cornerRadius={5}\n              >\n                <TextInput\n                  underlineColorAndroid="transparent"\n                  style={[styles.signupInput, styles.commonsignupStyle]}\n                  placeholder="Nom *"\n                  placeholderTextColor={colors.primaryColor}\n                />\n              </CardView>\n              <CardView\n                style={styles.cardStyle}\n                cardElevation={2}\n                cardMaxElevation={2}\n                cornerRadius={5}\n              >\n                <TextInput\n                  underlineColorAndroid="transparent"\n                  style={[styles.signupInput, styles.commonsignupStyle]}\n                  placeholder="Pr\xc3\xa9nom *"\n                  placeholderTextColor={colors.primaryColor}\n                />\n              </CardView>\n            </View>\n        </ScrollView>\n      </View>\n    );\n  }\n}\n

\n\n

\n