web-dev-qa-db-ja.com

React Nativeでテキスト入力のテキスト色を変更するにはどうすればよいですか？

入力のプレースホルダーは緑色ですが、緑色のテキスト入力も行うようにします（テキストテキストを入力しているときに、UIに十分に表示されない黒が表示されます）。どのようにグリーンにすることもできますか？

react-nativereact-native-androidreact-native-iosnative-base
6
Syuzanna

TextInputスタイルにcolor: 'green';を追加すると色が変わります

<TextInput style={styles.textInput} />

const styles = StyleSheet.create({
 textInput: {
  color: 'green',
 },
});`

native-baseでは、テーマにも注意する必要があります ドキュメントを参照

6
Mohamed Khalil

TextInputの色を変更する場合は、スタイルにcolorを追加します。

以下は、TextInputの色を青にする例です。

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
      <TextInput
        style=
        {{
          height: 40, borderColor: 'gray', borderWidth: 1, color : "blue"
        }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}
2
Sandeep Kushwaha

入力用のスタイルを作成し、色を緑に設定するだけです

const styles = StyleSheet.create({
    textInputStyle: {
    color: 'green',
    }
});

それをtextInputに割り当てます

<TextInput 
    style={styles.textInputStyle}
    placeholderTextColor='green'
    underlineColorAndroid='green' />
1
Zubair Akber

さまざまなソリューションを試した後、カスタムTextInputコンポーネントを実装し、背景として色を変更するTextコンポーネントと、その上に透明なフォント色を持つTextInputを配置しました。この問題がより良い方法ですぐに修正されることを願っています。

updateText(v) {
  const { onChange } = this.props;
  this.setState({ text: v});
  onChange(v);
}
render() {
  const { changeColor } = this.props;
  const { text } = this.state;
  return  <View style={{ position: 'relative', flex: 1 }}>
            <Text style={ [ { flex: 1, position: 'absolute', zIndex: 1 }, changeColor? { color: red } : null ]}>
              {text}
            </Text>
            <RTextInput
              onChangeText={v => this.updateText(v)}
              style={[{ flex: 1, color: 'transparent', zIndex: 100 }]}
              {...props}
            />
          </View>
}
0
David Barinas