如何在 <TextInput> 标签中显示内阴影？答案

【问题标题】：How to display inner shadow in <TextInput> tag?如何在 <TextInput> 标签中显示内阴影？
【发布时间】：2017-09-12 09:51:18
【问题描述】：

如何获得如下图的内阴影。我正在使用下面的代码来获取外阴影。但是我怎样才能得到 Inner shadow 呢？提前致谢。

<View style={styles.searchBar}>
<TextInput
placeholder={'Suchen...'}
style={styles.inputSearch}
onChangeText={t => this.setState({ text: t })}
value={text}
onSubmitEditing={this.onSearch}
/>
<TouchableOpacity style={styles.clearButton} onPress={this.onClear}>
<Image source={Images.cancelSmall} />
</TouchableOpacity>
</View>

样式：

searchBar: {
flexDirection: 'row',
borderWidth: 0.1,
borderColor: 'grey',
flex: 1,
height: 40,
borderRadius: 40,
backgroundColor: '#fafafa',
shadowColor: 'rgba(0, 0, 0, 0.05)',
shadowOffset: {
width: 2,
height: 3
},
shadowRadius: 6,
shadowOpacity: 1
},
inputSearch: {
paddingLeft: 10,
height: 44,
flex: 1
}

【问题讨论】：

标签： css react-native

【解决方案1】：

你可以使用react-native-shadow它有插入选项

import { BorderShadow } from 'react-native-shadow'
render = () => {
    const shadowOpt = {
        width:160,
        height:170,
        color:"rgba(0, 0, 0, 0.05)",
        border:2,
        inset: true,
        style:{marginVertical:5}
    }

    return (
        <BorderShadow setting={shadowOpt}>
            <TextInput
              placeholder={'Suchen...'}
              style={styles.inputSearch}
              onChangeText={t => this.setState({ text: t })}
              value={text}
              onSubmitEditing={this.onSearch}
              />
             <TouchableOpacity style={styles.clearButton} onPress={this.onClear}>
               <Image source={Images.cancelSmall} />
             </TouchableOpacity>
        </BorderShadow >
    )
}

【讨论】：

我刚刚交叉检查了那个库。但似乎没有什么对我有用。能否请您发送一些代码，如何使用 inset 选项显示内部阴影？
感谢您的快速回答。我现在就试试:)

【解决方案2】：

<LinearGradient
  style={styles.gradientButton}
  colors={['#040406', '#040406', '#040406', '#444446']}
  start={{ x: 0.48, y: 0.1 }}
  end={{ x: 0.5, y: 0.6 }}
>

使用深色背景色更好看

【讨论】：