如何在<TextInput>標記中顯示內部陰影？

Question

如何獲得如下圖像的內部陰影。我使用下面的代碼來獲取外部影子。但是我怎麼能得到內在的影子？提前致謝。

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

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