React Native 中的下划线占位符答案

【问题标题】：Underline placeholder in React NativeReact Native 中的下划线占位符
【发布时间】：2018-09-08 10:47:19
【问题描述】：

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

borderBottomWidth: 1,
borderBottomColor: '#B8B8B8',

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

【问题讨论】：

我不知道 react native，但如果你愿意，我可以告诉你如何实现这一点。
@dahiya_boy 请告诉我，我会尝试将其添加到 React Native 中
获取 textwidth ，这里是€0 现在根据您设置的下划线宽度。这就是我们在原生 ios 中所做的，可能它也可以在 react 中使用。
您是希望占位符下划线在用户与 TextInput 交互时一直存在，还是在他们开始输入时隐藏？
@Matt 我希望对我的以下回答提供一些反馈

标签： ios react-native underline

【解决方案1】：

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

演示

说明

我将borderBottomWidth 和borderBottomColor 应用于父视图，因为您可能不想使用multiline。如果您想使用多文本输入，您可以将这些样式直接应用于文本输入，如 docs 中所述。

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

一旦用户输入（文本长度大于 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>
   )
}

【讨论】：