如何在 React Native 的 TextInput 中放置图标? [英] How can I put an icon inside a TextInput in React Native?
问题描述
我正在考虑使用这样的东西 https://android-arsenal.com/details/1/3941,您可以按下图标以将密码显示为纯文本,而不是点.但是,我找不到任何可以帮助我的自定义组件.
I am thinking of having something like this https://android-arsenal.com/details/1/3941 where you have icon that you press to show password as plaintext, not as dots. However, I was unable to find any custom component that would help me.
我不想在这么小的功能上花太多时间,所以我在没有尝试任何东西的情况下问:有没有我遗漏的自定义组件?如果没有,是否有一种简单的方法可以将子项添加到 TextInput?还是应该将 TextInput 和 Touchable 并排放置?
I don't want to put too much time on such a minor feature, so I'm asking without having attempted anything yet: Is there a custom component I've missed? If not, is there a simple way to add children to TextInput? Or should I just have TextInput and Touchable side by side?
推荐答案
您可以像这样组合使用 View、Icon 和 TextInput:
You can use combination of View, Icon and TextInput like so:
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>
<TextInput
style={styles.input}
placeholder="User Nickname"
onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
</View>
并使用 flex-direction 进行样式设置
and use flex-direction for styling
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
},
图标取自react-native-vector-icons"
Icons were taken from "react-native-vector-icons"
这篇关于如何在 React Native 的 TextInput 中放置图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!