TextInput占位符未采用fontWeight

时间:2019-06-06 17:44:51

标签: react-native react-native-textinput

我有一个TextInput字段,并带有占位符。加载时,占位符文本应显示为fontWeight:"normal",并且当用户在文本框中输入值时-字母会进入fontWeight:"bold",但是当文本框再次为空时-占位符应恢复为{{1} }。当前,尽管更改和更新了状态,但是一旦用户在TextInput字段中输入并删除了文本,占位符仍会占用fontWeight:"normal"

我尝试使用placeholderStyle,但这不是我的情况,我不想更改样式,仅更改字体粗细。

"fontWeight:bold"

autocompleteTextInput的样式

  <TextInput
    style={
      !searchText
        ? [styles.autoCompleteInputStyle, styles.placeholderText]
        : [styles.autoCompleteInputStyle, styles.searchedText]
    }
    underlineColorAndroid="transparent"
    placeholder="Search item"
    placeholderTextColor="#505050"
    autocorrect={false}
    value={searchText}
    onChangeText={searchTextValue => this.onChangeText(searchTextValue)}
    clearButtonMode="while-editing"
    returnKeyType="search"
  />

我希望占位符应使用常规fontWeight,并且当用户输入文本时,应使用粗体。每当用户键入文本并从TextInput删除文本时,占位符文本都会更改为常规fontWeight。

2 个答案:

答案 0 :(得分:0)

我认为您的问题是!searchText。
确保!searchText为空白时为true。 您可能需要使其类似于

searchText === '' ? placeholderText : searchedText

答案 1 :(得分:0)

我可以通过在searchTextValue道具下将searchText更改为onChangeText来使其工作。

您可以查看我制作的here示例。