Question

我知道您可以动态更改占位符的文本和样式，但是可以一起创建自定义占位符视图吗？

这是我要实现的目标：

有可能做这样的事情吗？

Answer 1

我建议您对功能组件使用自定义样式。创建一个名为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 };

Answer 2

创建一个名称为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}
      />
  }
}

并在另一个组件中使用它：

import MyTextInput from '.../MyTextInput';

<MyTextInput 
  text={this.state.myText}
  style={{ fontFamily: "Your Font" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>

您可以通过这种方式自定义所需的任何组件。

Answer 3

您可以这样做

<TextInput 
  placeholder="YOUR TEXT"
  placeholderTextColor="#555555"
/>

当然，您也可以创建自己的TextInput组件版本，该组件应在TextInput顶部包含自定义占位符，一旦文本更改，您将隐藏自定义占位符

反应本机自定义TextInput占位符

3 个答案: