react-native - 是否有用于带有 React Native 的 Android 跨平台 clearButtonMode

Question

应该如何实现“X”来清除 native react 中的按钮，以便它适用于 Android 和 iOS。 iOS 有“clearButtonMode” enum('never', 'while-editing', 'unless-editing', 'always') 的文本输入选项。
为了使其跨平台，我们是否只需要添加清除按钮的 android 条件渲染？就像是:

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

似乎有点hacky，所以我想知道是否有更清洁的方法。

Answer 1

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

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

在主组件构造函数中创建这些状态:

TextInput 状态的状态(是否已触摸？，是否还有文本？)

TextInput 实际值的状态，设置 TextInput 的 value到这个状态。

例如:

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

创建回调函数来设置您的状态:

创建一个回调函数来设置 TextInput 的值状态和状态状态，并将其分配给 onChange支持你的 TextInput。

例如:

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