TextInput 占位符不采用 fontWeight答案

【问题标题】：TextInput placeholder is not taking fontWeightTextInput 占位符不采用 fontWeight
【发布时间】：2019-06-06 17:44:51
【问题描述】：

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

我尝试使用 placeholderStyle，但这不适用于我的场景，我不想更改样式，只更改字体粗细。

  <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"
  />

自动完成文本输入的样式

  autoCompleteInputStyle: {
    flexDirection: "row",
    height: 40,
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: "#cccccc",
    fontSize: 18,
    flex: 1,
    justifyContent: "center",
    marginRight: 14,
    marginBottom: 20,
    paddingLeft: 40,
    color: "#000000",
    borderRadius: 2,
    lineHeight: 21,
    fontFamily: fontStyleFlightCard.fontFamily
  },
    searchedText: {
      fontWeight: "bold"
    },
    placeholderText: {
      fontWeight: "normal"
    },

我希望占位符应该是正常的 fontWeight，当用户输入文本时，它应该是粗体。每当用户从 TextInput 键入和删除文本时，占位符文本都会更改为正常的 fontWeight。

【问题讨论】：

标签： react-native react-native-textinput

【解决方案1】：

我认为您的问题是 !searchText。
确保 !searchText 在空白时为 true。您可能需要将其设置为

searchText === '' ? placeholderText : searchedText

【讨论】：

我尝试对条件做同样的事情，但是当没有可用文本时，fontWeight 没有从粗体变为正常。

【解决方案2】：

我已经通过在 onChangeText 属性下将 searchTextValue 更改为 searchText 来实现它。

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

【讨论】：