Как изменить стиль оформления TextInput в React Native?

Ответ 1

Улучшение ответа Даниэля для более общего решения

class TextInput2 extends Component {
  constructor(props) {
    super(props);
    this.state = { placeholder: props.value.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}
      />
  }
}

Использование:

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

Ответ 2

Вы можете установить цвет заполнителя, используя placeholderTextColor.

<TextInput placeholderTextColor={'red'} />

Ответ 3

Вы можете создать эту функцию самостоятельно. Заполнитель отображается, когда ввод пуст, поэтому вы можете проверить свое состояние и соответственно изменить fontStyle:

<TextInput
  onChangeText={txt => this.setState({enteredText: txt})}
  fontStyle={this.state.enteredText.length == 0 ? 'italic' : 'normal'}
  style={style.input} />

По некоторым причинам это, кажется, не работает с fontFamily = System. Таким образом, вы должны явно указать fontFamily.

Ответ 4

Содержимое и placeHolder of TextInput используют общий стиль, поэтому вы можете установить fontWeight и fontSize для placeHolder. Для другого вы можете установить свойство placeholderTextColor для TextInput

Ответ 5

Вы также можете использовать компонент без сохранения состояния.

Вот мое решение:

Во-первых, в моем компоненте экрана...

import React from 'react';
import { View } from 'react-native';
import MyWrappedComponent from '../wherever/your/components/are/MyWrappedComponent';

class ScreenComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myText: null,
    };
    this.handleTextOnChange = this.handleTextOnChange.bind(this);
  }

  handleTextOnChange(myText) {
    this.setState({ myText });
  }

  render() {
    const { myText } = this.state

  return (
    <View>
      <MyWrappedComponent            
        value={myText}
        placeholder="My Placeholder Text"
        onChangeText={this.handleTextOnChange}
        style={styles.someStyle}
        placeholderStyle={style.somePlaceholderStyle}
      />
    </View>
  )
}

Затем в моем завернутом компоненте...

import React from 'react';
import { TextInput } from 'react-native-gesture-handler';

const MyWrappedComponent = ({
  style,
  placeholderStyle,
  value,
  ...rest
}) => (
  <TextInput
    {...rest}
    style={!value ? [style, placeholderStyle] : style}
  />
);

export default MyWrappedComponent;

Ответ 6

Если вы просто хотите отрегулировать расположение местозаполнителя, вы можете обернуть его внутри и добавить стиль к:

<View style={{
    flex: 0.3,
    alignContent: "center",
    justifyContent: "center",
    alignSelf: "center"
    }}>

это позволит заполнителю выравниваться по центру, так как иногда "alignContent", "alignItems", "justifyContent" могут не работать. Также:

inputContainerStyle={{
                    borderColor: 'transparent'
                }}

стилизовать любые граничные линии (вышеприведенная убирает все границы, возникающие от'act-native-elements ').