是否有适用于Android的跨平台clearButtonMode与React Native

如何在原生反应中实现“X”按钮以清除按钮，以便它可以与Android以及iOS一起使用。 iOS的文本输入选项为“clearButtonMode”enum（'never'，'while-editing'，'unless-editing'，'always'）。是否有适用于Android的跨平台clearButtonMode与React Native

为了让它跨平台，我们是否需要添加一个清晰按钮的android条件渲染？喜欢的东西：

{Platform.OS === 'android' && <ClearTextButton />}

似乎有点哈克，所以我想知道如果有这种清洁方法。

来源

2017-01-22 MonkeyBonkey

对于您的问题，您只需创建一个简单的按钮来处理输入字段的清除功能，并将其置于您的TextInput组件旁边，以产生clearButtonMode的效果。

一个天真的实现可能是这样的：

在你的主要成分构造创建这些状态：
- 用于您的TextInput的状态状态（被触及？它有文字尚未？）
- TextInput的实际值的状态，请将TextInput的value设置为此状态。

例如：

this.state = { 
    textInput1Status: 'untouched', 
    textInput1Value: '', 
};

创建回调函数来设置状态：

创建的回调函数，同时设置你的TextInput的值状态和状态状态，并将其分配给您的TextInput的onChange属性。

例如：

<TextInput 
    onChangeText={(text) => this.onTextInput1Change(text)} 
    value={this.state.textInput1Value} 
/> 

... 

onTextInput1Change(text) { 
    this.setState({ 
     textInput1Status: 'touched', 
     textInput1Value: text 
    }); 
}

使用TouchableOpacity创建自己的按钮，并处理该清除功能。

例如：

<TouchableOpacity onPress={this.clearText()}> 
    <Image 
    style={styles.button} 
    source={require('./myButton.png')} 
    /> 
</TouchableOpacity> 

... 

clearText() { 
    this.setState({ 
     textInput1Status: 'untouched', 
     textInput1Value: '', 
    }); 
}

把手您的 “X” 按钮的呈现：

例如：

renderClearButotn() { 
    if (this.state.textInput1Status == 'touched') { 
     return (
      <TouchableOpacity onPress={this.clearText()}> 
       <Image 
       style={styles.button} 
       source={require('./myButton.png')} 
       /> 
      </TouchableOpacity> 
     ); 
    } else { 
     return ''; 
    } 
} 

... 

render() { 
    return (
     <TextInput 
      onChangeText={(text) => this.onTextInput1Change(text)} 
      value={this.state.textInput1Value} 
     /> 
     {this.renderClearButotn()}   
    ); 
}

通过这种方式，您的代码将独立于iOS和Android。我希望这可以帮助你！

来源

2017-01-23 00:16:08 HoangLM

是否有适用于Android的跨平台clearButtonMode与React Native

回答

相关问题