是否有用于带有 React Native 的 Android 跨平台 clearButtonMode [英] Is there a Cross platform clearButtonMode for Android with React Native

问题描述

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

How should one implement the "X" to clear button in react native so that it works with Android as well as iOS. iOS has the text input option of "clearButtonMode" enum('never', 'while-editing', 'unless-editing', 'always').

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

To make it cross platform, do we need to just add an android conditional rendering of the clear button? Something like:

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

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

Seems a bit hacky so I am wondering if there is a cleaner method for this.

推荐答案

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

For your problem, you just need to create a simple button to handle the clear function of your input field and place it right next to your TextInput component to have the effect of clearButtonMode.

一个简单的实现可能是这样的:

A naive implementation could be something like this:

1. 在您的主要组件构造函数中创建这些状态:
   • TextInput 状态的状态(是否已触摸?是否还有文本?)
   • TextInput 实际值的状态，将 TextInput 的 value 设置为此状态.

1. Create these states in your main component constructor :
   • A state for the status of your TextInput (is it touched?, does it have text yet?)
   • A state for the actual value of your TextInput, set your TextInput's value to this state.

例如:

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

1. 创建回调函数来设置您的状态:
   • 创建一个回调函数来设置 TextInput 的值状态和状态状态，并将其分配给 TextInput 的 onChange 属性.

例如:

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

...

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

1. 使用 TouchableOpacity 创建您自己的按钮并处理清除功能.

例如:

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

...

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

1. 处理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.希望可以帮到你！

In this way your code will be independent from both iOS and Android. I hope this could help you!

这篇关于是否有用于带有 React Native 的 Android 跨平台 clearButtonMode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！