我在想這樣的東西，如https://android-arsenal.com/details/1/3941你有圖標，你按顯示密碼爲明文，而不是點。但是，我無法找到任何可以幫助我的自定義組件。如何將圖標放入React Native中的TextInput內？
我不想把太多的時間放在這樣一個小功能上，所以我現在問的是沒有嘗試過任何東西：有沒有我錯過的自定義組件？如果沒有，是否有一種簡單的方法將孩子添加到TextInput中？或者我應該只有TextInput和觸摸並排？
您可以使用此模塊，它很容易使用：https://github.com/halilb/react-native-textinput-effects
這裏有我從我自己的項目採取了一個例子，我剛剛刪除的內容，我認爲我們沒有需要的例子。
import React, { Component } from 'react';
import {
Text,
TouchableOpacity,
View,
StyleSheet,
Dimensions,
Image
} from 'react-native';
class YourComponent extends Component {
constructor(props) {
super(props);
this._makeYourEffectHere = this._makeYourEffectHere.bind(this);
this.state = {
showPassword: false,
image: '../statics/showingPassImage.png'
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={this._makeYourEffectHere}>
<Text>button</Text>
<Image style={styles.image} source={require(this.state.image)}></Image>
</TouchableOpacity>
<TextInput password={this.state.showPassword} style={styles.input} value="abc" />
</View>
);
}
_makeYourEffectHere() {
var png = this.state.showPassword ? '../statics/showingPassImage.png' : '../statics/hidingPassImage.png';
this.setState({showPassword: !this.state.showPassword, image: png});
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
button: {
width: Dimensions.get('window').width * 0.94,
height: 40,
backgroundColor: '#3b5998',
marginTop: Dimensions.get('window').width * 0.03,
justifyContent: 'center',
borderRadius: Dimensions.get('window').width * 0.012
},
image: {
width: 25,
height: 25,
position: 'absolute',
left: 7,
bottom: 7
},
input: {
width: Dimensions.get('window').width * 0.94,
height: 30
}
});
module.exports = YourComponent;
我希望它可以幫助你。
讓我知道它是否有用。
你可以將你的TextInput包裝在View中。
<View><TextInput/><Icon/><View>和動態地計算寬度，如果要添加圖標，iconWidth = 0.05 * viewWidth，textInputWidth = 0.95 * viewWidth，否則textInputwWidth = viewWidth。 View和TextInput BackgroundColor是白色的。小黑客）
您可以使用View，圖標和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>
，並使用柔性方向造型
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',
},
圖標分別取自「反應，native-矢量圖標「
完美包裝圖標！ – Felix
作爲一種魅力！乾杯! –
基本上你不能把一個圖標放入一個textInput中，但你可以通過將它包裝在視圖中並設置一些簡單的樣式規則來僞裝它。
下面是它如何工作的：
代碼：
<View style={styles.passwordContainer}>
<TextInput
style={styles.inputStyle}
autoCorrect={false}
secureTextEntry
placeholder="Password"
value={this.state.password}
onChangeText={this.onPasswordEntry}
/>
<Icon
name='what_ever_icon_you_want'
color='#000'
size={14}
/>
</View>
風格：
passwordContainer: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#000',
paddingBottom: 10,
},
inputStyle: {
flex: 1,
},
（注：該圖標是TextInput下方所以它出現在最右邊，如果是上述的TextInput它會出現在）
它當然看起來是正確的，但在例子和自述中，似乎沒有跡象表明圖標能夠被按下。 – Zygro
如果您分叉項目，您可以用'