是否有适用于带有 React Native 的 Android 的跨平台 clearButtonMode答案

【问题标题】：Is there a Cross platform clearButtonMode for Android with React Native是否有适用于带有 React Native 的 Android 的跨平台 clearButtonMode
【发布时间】：2022-03-28 23:51:29
【问题描述】：

应该如何在 React Native 中实现“X”以清除按钮，以便它适用于 Android 和 iOS。 iOS 有 "clearButtonMode" enum('never', 'while-editing', 'unless-editing', 'always') 的文本输入选项。

要使其跨平台，我们是否只需要添加清除按钮的 android 条件渲染？比如：

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

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

【问题讨论】：

标签： react-native

【解决方案1】：

对于您的问题，您只需要创建一个简单的按钮来处理输入字段的清除功能，并将其放置在您的 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.renderClearButton()}          
    );
}

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

【讨论】：

很遗憾没有其他选择。对于一个小功能来说，这是很多工作

【解决方案2】：

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

我不得不稍微修改样式以匹配我的用户界面

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

代码归功于https://www.codevscolor.com/react-native-text-input-clear-button/ auther

【讨论】：

【解决方案3】：

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

【讨论】：