我在IOS中发现了这种奇怪的行为(在模拟器和真实设备上都可以,但是我只有模拟器的屏幕截图),在输入到TextInput组件时,它在输入的文本后面放置了一个怪异的突出显示。我已参考以下问题(自关闭以来):https://github.com/facebook/react-native/issues/7070
我已经搜索了文档(https://facebook.github.io/react-native/docs/textinput)来找到答案,但是似乎还没有得出任何答案。我以为我与selectTextOnFocus
道具很接近,但是我将其设置为false并且没有任何改变(行为仍然存在)。
我也尝试将textDecorationColor和textShadowColor设置为透明,无济于事。我真的不知所措。
这是我输入的代码:
import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export class GeneralInput extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: this.props.placeholder,
inputValue: "",
inputting: false,
};
}
whenInputIsFocused() {
this.setState({placeholder: ""});
}
whenInputIsBlurred() {
if (this.state.inputValue === "") {
this.setState({placeholder: this.props.placeholder});
}
}
focusNextField(nextField) { this.refs[nextField].focus(); }
render() {
const autoFocus = this.props.autoFocus == 'true';
const multiline = this.props.multiline == 'true';
return(
<View style={styles.outerContainer}>
<Text style={styles.labelText}>{this.props.labelText}</Text>
<TextInput
autoCapitalize='none'
autoFocus={autoFocus}
onChangeText={(inputValue) => this.setState({inputValue})}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputIsBlurred.bind(this)}
onFocus={this.whenInputIsFocused.bind(this)}
underlineColorAndroid="transparent"
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
placeholder={this.state.placeholder}
placeholderTextColor='rgba(255, 255, 255, 0.3)'
multiline={multiline}
selectTextOnFocus={false}
onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
style={styles.inputStyles} />
</View>
);
}
}
const styles = StyleSheet.create({
outerContainer: {
justifyContent: 'center',
alignItems: 'flex-start',
width: '90%',
marginBottom: 20,
},
labelText: {
fontFamily: 'rubik-bold',
fontSize: 14,
fontWeight: 'bold',
color: '#fff',
marginBottom: 5,
},
inputStyles: {
height: 40,
borderRadius: 2,
backgroundColor: 'rgba(255, 255, 255, 0.3);',
shadowColor: 'rgba(0, 0, 0, 0.15)',
shadowOffset: {width: 0,height: 2},
shadowOpacity: 0,
shadowRadius: 0,
width: '100%',
textDecorationColor: 'transparent',
fontSize: 14,
color: '#fff',
paddingLeft: 15,
fontFamily: 'rubik-bold',
},
});
以下是实际发生的屏幕快照(第一个屏幕快照带有突出显示,第二个屏幕快照只是带有占位符文本的输入内容供参考):
所以问题是... 我如何在ios上使该奇怪的突出显示消失?
答案 0 :(得分:2)
Text
未被选中,只是您在样式中提供的背景颜色。
只需从
<TextInput />
的样式中删除背景色
答案 1 :(得分:0)
因此,按照@Siraj的说法,发生这种奇怪行为的原因是因为我应用于<TextInput />
组件的背景色也正应用于输入的文本。因此,我将<TextInput />
包裹在<View />
中,应用了height
,width
,backgroundColor
,shadow
和borderRadius
支撑周围的<View />
,并具有预期的效果!请参见下面的代码:
import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export class GeneralInput extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: this.props.placeholder,
inputValue: "",
inputting: false,
};
}
whenInputIsFocused() {
this.setState({placeholder: ""});
}
whenInputIsBlurred() {
if (this.state.inputValue === "") {
this.setState({placeholder: this.props.placeholder});
}
}
focusNextField(nextField) { this.refs[nextField].focus(); }
render() {
const autoFocus = this.props.autoFocus == 'true';
const multiline = this.props.multiline == 'true';
return(
<View style={styles.outerContainer}>
<Text style={styles.labelText}>{this.props.labelText}</Text>
<View style={styles.inputContainer}> // added View
<TextInput
autoCapitalize='none'
autoFocus={autoFocus}
onChangeText={(inputValue) => this.setState({inputValue})}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputIsBlurred.bind(this)}
onFocus={this.whenInputIsFocused.bind(this)}
underlineColorAndroid="transparent"
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
placeholder={this.state.placeholder}
placeholderTextColor='rgba(255, 255, 255, 0.3)'
multiline={multiline}
selectTextOnFocus={false}
onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
style={styles.inputStyles} />
</View> // Closing the added View
</View>
);
}
}
const styles = StyleSheet.create({
outerContainer: {
justifyContent: 'center',
alignItems: 'flex-start',
width: '90%',
marginBottom: 20,
},
labelText: {
fontFamily: 'rubik-bold',
fontSize: 14,
fontWeight: 'bold',
color: '#fff',
marginBottom: 5,
},
inputContainer: { // added styles
height: 40,
width: '100%',
backgroundColor: 'rgba(255, 255, 255, 0.3);',
shadowColor: 'rgba(0, 0, 0, 0.15)',
shadowOffset: {width: 0,height: 2},
shadowOpacity: 0,
shadowRadius: 0,
borderRadius: 2,
},
inputStyles: {
height: '100%',
width: '100%',
fontSize: 14,
color: '#fff',
paddingLeft: 15,
fontFamily: 'rubik-bold',
},
});