Skip to main content
 首页 » 编程设计

javascript之如何在 React Native 中将图标放入 TextInput 中

2024年06月03日13freeliver54

我正在考虑有这样的东西 https://android-arsenal.com/details/1/3941其中有图标,按下该图标即可将密码显示为纯文本,而不是点。但是,我无法找到任何可以帮助我的自定义组件。

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

请您参考如下方法:

您可以使用 View 、图标和文本输入的组合,如下所示:

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

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