Question

应该如何实现“X”以清除本机中的按钮，以便它可以与Android以及iOS一起使用。 iOS的文本输入选项为“clearButtonMode”枚举（'never'，'while-editing'，'除非编辑'，'总是'）。

为了使它跨平台，我们是否需要添加清除按钮的android条件渲染？类似的东西：

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

看起来有点hacky所以我想知道是否有更清洁的方法。

Answer 1

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

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

在主要组件构造函数中创建这些状态：
- TextInput状态的状态（是否触及？，是否有文字？）
- TextInput实际值的状态，将TextInput＆＃39; s 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: '',
    });
}

处理你的＆＃34; X＆＃34;按钮：

例如：

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。我希望这可以帮到你！

Answer 2

此解决方案工作正常，但与 iOS 中的 clearButtonMode 效果不完全相同。当点击 clearButtonMode 时不会关闭键盘，这个针对 android 的解决方案将在本机调度 Keyboard.dismiss 事件并且没有什么可以捕获它，因此用户需要再次点击输入以恢复键盘。

Answer 3

我从this文章中找到了另一个简单的解决方案。它在Android上非常适合我，并且有望在iOS中提供相同的视图和行为。

我必须稍微修改样式以使其与UI匹配

closeButtonParent: {
    justifyContent: 'center',
    alignItems: 'center',
    borderTopRightRadius: 5,
    borderBottomRightRadius: 5,
    backgroundColor: "#cdcdcd", 
    width: 30,
},

代码功劳归https://www.codevscolor.com/react-native-text-input-clear-button/认证人

是否有一个跨平台clearButtonMode for Android与React Native

3 个答案: