react-native – 如何在React Native中的TextInput中放置一个图

发布时间：2020-12-15 20:54:18 所属栏目：百科来源：网络整理

导读：我正在考虑像这样的 https://android-arsenal.com/details/1/3941,你有按下的图标显示密码为明文,而不是点.但是,我无法找到任何可以帮助我的自定义组件. 我不想在这么小的功能上花太多时间,所以我在没有尝试任何事情的情况下问：是否有我错过的自定义组件？

我正在考虑像这样的 https://android-arsenal.com/details/1/3941,你有按下的图标显示密码为明文,而不是点.但是,我无法找到任何可以帮助我的自定义组件.

我不想在这么小的功能上花太多时间,所以我在没有尝试任何事情的情况下问：是否有我错过的自定义组件？如果没有,是否有一种简单的方法将子项添加到TextInput？或者我应该只是将TextInput和Touchable并排？

您可以使用View,Icon和TextInput的组合,如下所示：

<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进行样式设计

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,color: '#424242',

图标取自“react-native-vector-icons”

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!