反应本机中的TextInput显示具有颜色背景的文本值
Posted
技术标签:
【中文标题】反应本机中的TextInput显示具有颜色背景的文本值【英文标题】：TextInput in react native show text value with a color background 【发布时间】：2019-01-14 17:47:10 【问题描述】：我正在尝试使用半透明文本输入来制作反应原生的登录屏幕。但是当我在输入中键入文本时出现了一种奇怪的行为：键入的文本看起来像是突出显示的（但不是）。正如您在此屏幕截图中看到的那样：
（好像上传到imgur失败，所以：https://image.ibb.co/hvBDQe/Image_1.jpg）
这是我的代码：
class LoginForm extends Component
//#region Constructeurs
constructor(props)
// Appel du constructeur de Component
super(props);
// Initialise les propriétés du composant
this.state =
isLoading: false,
usernameInput: "",
passwordInput: "",
urlInput: "",
portInput: "443"
;
//#endregion
//#region Cycle de vie du Component
componentDidMount()
render()
return (
<View style=styles.mainContainer pointerEvents=this.state.isLoading ? 'none' : 'auto'>
<TextInput style = styles.input
autoCapitalize="none"
onSubmitEditing=() => this.passwordInput.focus()
autoCorrect=false
keyboardType='email-address'
returnKeyType="next"
placeholder='*Email*'
placeholderTextColor=COLOR_GREY_300
value=this.state.usernameInput
onChangeText=text => this.setState(usernameInput: text)/>
<TextInput style = styles.input
returnKeyType="go"
ref=(input)=> this.passwordInput = input
onSubmitEditing=() => this.urlInput.focus()
placeholder='*Mot de passe*'
returnKeyType="next"
placeholderTextColor=COLOR_GREY_300
secureTextEntry
value=this.state.passwordInput
onChangeText=text => this.setState(passwordInput: text)/>
<TextInput style = styles.input
autoCapitalize="none"
onSubmitEditing=() => this.portInput.focus()
ref=(input)=> this.urlInput = input
autoCorrect=false
returnKeyType="next"
placeholder='*adresse url*'
placeholderTextColor=COLOR_GREY_300
value=this.state.urlInput
onChangeText=text => this.setState(urlInput: text)/>
<TextInput style = styles.input
autoCapitalize="none"
onSubmitEditing=this._onSubmitLogin
ref=(input)=> this.portInput = input
autoCorrect=false
keyboardType='number-pad'
returnKeyType="go"
placeholder='*port*'
placeholderTextColor=COLOR_GREY_300
value=this.state.portInput
onChangeText=text => this.setState(portInput: text) />
<TouchableOpacity style=styles.buttonContainer onPress=this._onSubmitLogin>
<Text style=styles.buttonText>*LOGIN*</Text>
</TouchableOpacity>
<ActivityIndicator size="large" color=COLOR_SECONDARY animating=this.state.isLoading style=styles.activityIndicator />
</View>
);
//#endregion
//#region Listener
_onSubmitLogin = () =>
// Affichage du loader
this.setState(
isLoading: true
);
// Récupération de l'API KEY
let authController = new OBAuthController();
authController.callPostCreateApiKey().then((apiKey) =>
console.log("apiKey = " + JSON.stringify(apiKey));
// Masquage du loader
this.setState(
isLoading: false
);
);
//#endregion
export default LoginForm;
//#region Définition de la StyleSheet
const styles = StyleSheet.create(
mainContainer:
padding: 50
,
input:
height: 40,
backgroundColor: 'rgba(225,225,225,0.3)',
marginBottom: 16,
padding: 10,
color: '#fff'
,
buttonContainer:
backgroundColor: '#2980b6',
paddingVertical: 15
,
buttonText:
color: 'white',
textAlign: 'center',
fontWeight: '700'
,
activityIndicator:
position:'absolute',
alignSelf:'center'
)
//#endregion有什么想法吗？谢谢！
【问题讨论】：
尝试去除styles.input的背景色 @Hariks 是的，当我删除此样式道具时，它可以工作。但我想让我的背景半透明...... 将 textInput 包装在 View 中，并为 View 提供所需的背景颜色或为 textInput 提供固定宽度。 @Hariks 它就像一个魅力！谢谢！ 【参考方案1】：在@Hariks 评论之后，我最终将我的每个 TextInput 包装到一个视图中：
<View style=styles.inputView>
<TextInput style = styles.input
autoCapitalize="none"
onSubmitEditing=() => this.passwordInput.focus()
autoCorrect=false
keyboardType='email-address'
returnKeyType="next"
placeholder='*Email*'
placeholderTextColor=COLOR_GREY_300
value=this.state.usernameInput
onChangeText=text => this.setState(usernameInput: text)/>
</View>
<View style=styles.inputView>
<TextInput style = styles.input
returnKeyType="go"
ref=(input)=> this.passwordInput = input
onSubmitEditing=() => this.urlInput.focus()
placeholder='*Mot de passe*'
returnKeyType="next"
placeholderTextColor=COLOR_GREY_300
secureTextEntry
value=this.state.passwordInput
onChangeText=text => this.setState(passwordInput: text)/>
</View>
<View style=styles.inputView>
<TextInput style = styles.input
autoCapitalize="none"
onSubmitEditing=() => this.portInput.focus()
ref=(input)=> this.urlInput = input
autoCorrect=false
returnKeyType="next"
placeholder='*adresse url*'
placeholderTextColor=COLOR_GREY_300
value=this.state.urlInput
onChangeText=text => this.setState(urlInput: text)/>
</View>
<View style=styles.inputView>
<TextInput style = styles.input
autoCapitalize="none"
onSubmitEditing=this._onSubmitLogin
ref=(input)=> this.portInput = input
autoCorrect=false
keyboardType='number-pad'
returnKeyType="go"
placeholder='*port*'
placeholderTextColor=COLOR_GREY_300
value=this.state.portInput
onChangeText=text => this.setState(portInput: text) />
</View>还有样式：
inputView:
height: 40,
backgroundColor: 'rgba(225,225,225,0.3)',
marginBottom: 16,
padding: 10,
,
input:
color: '#fff'
,【讨论】：
刚刚遇到同样的问题。这个解决方案效果很好！谢谢！以上是关于反应本机中的TextInput显示具有颜色背景的文本值的主要内容，如果未能解决你的问题，请参考以下文章