React Native 自定义 TextInput 占位符 [英] React Native Custom TextInput Placeholder

问题描述

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

I know you can dynamically change the Placeholder text and style, but can you create a custom Placeholder view all together?

这就是我想要实现的目标:

This is what I'm trying to achieve:

 

可以做这样的事情吗?

推荐答案

我建议你对功能组件使用自定义样式.创建一个名为 RenderInput 的功能组件，通过 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.

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 };

这篇关于React Native 自定义 TextInput 占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！