React Native中的下划线占位符

Question

如何在React Native中强化iOS中的占位符？我可以通过以下方式为整个TextInput（非占位符）加下划线：

borderBottomWidth: 1,
borderBottomColor: '#B8B8B8',

我只想强调TextInput的占位符，而不是TextInput

Answer 1

我为你做了一些解决方法。一旦开始输入，下划线就会被删除。

演示

<强>解释

我已将borderBottomWidth和borderBottomColor应用于父视图，因为您可能不想使用multiline。如果要使用mulitine TextInput，可以将这些样式直接应用于Textinput，如docs中所述。

  

请注意，某些道具仅适用于multiline = {true / false}。   此外，边框样式仅适用于元素的一侧   （例如，borderBottomColor，borderLeftWidth等）将不会被应用   如果multiline = false。为了达到同样的效果，你可以包装你的   视图中的TextInput

一旦用户输入（文本长度大于0）某事，this.setState({ active: true })就会被触发。之后，条件渲染发生在这里：

borderBottomColor: this.state.active === false ? 'red' : 'transparent' // hide color, when text is present
width: this.state.active === false ? scaledWidth : 100 // increase width to 100. Value is just a placeholder, use whatever you like

完整代码

// helper function to scale font size and placeholder width.
scale = (fontSize) => {
    const screenWidth = Dimensions.get('window').width; 
    const ratio = fontSize / 375; // get ratio based on your standard scale, here: width of iphone 7
    const newSize = Math.round(ratio * screenWidth);
    return newSize; 
  }


render() {
   // you probably have to play around with those standard values 
   const scaledFontSize = this.scale(22); 
   const scaledWidth = this.scale(25);    
   return (
      <View style={{ marginTop: 50, flex: 1, alignItems: 'flex-end' }}>
         <View style={{ borderBottomWidth: 2, borderBottomColor: this.state.active === false ? 'red' : 'transparent', width: this.state.active === false ? scaledWidth : 100  }}>
             <TextInput
             style={{ height: 30,  textAlign: 'right', fontSize: scaledFontSize }}
             onChangeText={(text) => text.length > 0 ? this.setState({ active: true }) : this.setState({ active: false })}
             placeholder={'10'}
             //multiline 
             />
        </View>
     </View>
   )
}