[英]React Native Custom TextInput Placeholder
I would suggest you to use custom style with the functional component.Create a functional component called RenderInput
for which pass placeholder
as props. 我建议您将自定义样式与功能组件一起使用。创建一个名为
RenderInput
的功能组件,将placeholder
用作道具。
import React, {Component} from 'react';
import {TextInput, View, Text} from 'react-native';
const RenderInput = ({ label , inputvalue,styleLabel, ipOnChangeText, placeholder}) => {
const {inputStyle, labelStyle, containerStyle} = styles;
return(
<View style = {containerStyle}>
<Text style= {styleLabel ? labelStyle : ""} >{label}</Text>
<TextInput
autoCorrect={false}
placeholder={placeholder}
style= {inputStyle}
/>
</View>
);
}
const styles ={
inputStyle:{
color: '#333',
fontSize: 16,
lineHeight: 23,
borderBottomColor: '#333',
borderBottomWidth: 0.5,
fontFamily: 'System',
},
labelStyle:{
fontSize: 18,
color: '#737373',
paddingBottom: 10,
fontFamily: 'System',
position: 'relative',
':after': {
content: '* ',
position: absolute,
left: 5,
top: 0,
color: '#bbb'
}
},
containerStyle:{
flexDirection: 'column',
marginTop: 10,
marginBottom: 10
}
}
export { RenderInput };
Creat a componet with name MyTextInput like this: 创建一个名称为MyTextInput的组件,如下所示:
class MyTextInput extends Component {
constructor(props) {
super(props);
this.state = { placeholder: props.text.length == 0 }
this.handleChange = this.handleChange.bind(this);
}
handleChange(ev) {
this.setState({ placeholder: ev.nativeEvent.text.length == 0 });
this.props.onChange && this.props.onChange(ev);
}
render() {
const { placeholderStyle, style, onChange, ...rest } = this.props;
return <TextInput
{...rest}
onChange={this.handleChange}
style={this.state.placeholder ? [style, placeholderStyle] : style}
/>
}
}
and use this in another component: 并在另一个组件中使用它:
import MyTextInput from '.../MyTextInput';
<MyTextInput
text={this.state.myText}
style={{ fontFamily: "Your Font" }}
placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>
you can custom any component you want with this way. 您可以通过这种方式自定义所需的任何组件。
You can do something like this 你可以做这样的事情
<TextInput
placeholder="YOUR TEXT"
placeholderTextColor="#555555"
/>
OR of course you can create your own version of the component TextInput something that contains the custom placeholder on top of the TextInput and once the text change you hide the custom placeholder 或者,当然,您可以创建自己版本的TextInput组件,该组件应在TextInput顶部包含自定义占位符,一旦文本更改,您将隐藏自定义占位符
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.