如何更改react native中文本输入的文本颜色?

tf7tbtn2  于 2022-12-24  发布在  React
关注(0)|答案(5)|浏览(447)

输入的占位符是绿色的,但我也想使绿色的文本输入(当我键入文本的文本颜色显示黑色,这是不够的,在我的UI)。我怎样才能使它也绿色?

3pvhb19x

3pvhb19x1#

TextInput样式中添加color: 'green';将更改颜色

<TextInput style={styles.textInput} />

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

native-base中,您还需要注意主题化(参见文档)

ukdjmx9f

ukdjmx9f2#

只需为您的输入创建一个样式并将颜色设置为绿色

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

并将其分配给textInput

<TextInput 
    style={styles.textInputStyle}
    placeholderTextColor='green'
    underlineColorAndroid='green' />
stszievb

stszievb3#

如果要更改TextInput颜色,请在样式中添加颜色
下面的示例将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}
      />
    );
  }
}
qyuhtwio

qyuhtwio4#

在尝试了许多不同的解决方案之后,我实现了一个自定义的TextInput组件,其中我放置了一个文本组件,它可以更改背景颜色,并在其上放置了一个具有透明字体颜色的TextInput。2我希望这个问题可以很快得到更好的解决。

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

luaexgnf5#

//Here is my input text 

<TextInput
            style={styles.txtinp1}
            placeholder="Password"
            placeholderTextColor={"grey"}
          />

// here are my styles you just need to add color in styles 

txtinp1: {
    backgroundColor: "#000000",
    height: "15%",
    width: "90%",
    marginBottom: 10,
    borderRadius: 25,
    paddingLeft: 20,
    color: "grey",
  },

相关问题