React Native(十三)——ios键盘挡住textInput

Z时代
2024-01-10
分类：综合

react

渐入佳境

用React Native重构的项目也快接近尾声，剩下的就是适配ios的功能了。慢慢地也从中琢磨出了一点门道，于是就遇见了键盘遮挡textInput问题斑斑；

正常页面：

android点击下面的“外部链接”，效果：

而同样代码在ios中（键盘遮挡住了需要输入链接地址的地方……）：

区别在这

页面简单介绍(部分代码)：

...
return (
                <ScrollView style={{ backgroundColor: skin.tint }}>
                    <View style={publishStyle.container}>
                        <View style={publishStyle.contentOuter}>
                            <TextInput
                                style={publishStyle.contentText}
                                clearButtonMode="while-editing"
                                returnKeyType="done"
                                ref="input"
                                onBlur={Keyboard.dismiss}
                                underlineColorAndroid="transparent"
                                multiline={true}
                                onChangeText={this._contentChange}
                                maxLength={140}
                                enablesReturnKeyAutomatically={true}
                                blurOnSubmit={true}
                                defaultValue={this.state.content}
                                onSubmitEditing={this._onSubmitEditing}
                            />
                        </View>
                        <View
                            style={{
                                marginTop: 10,
                                height: 240
                            }}
                        >
                            {this.createImageItem()}
                        </View>
                        <View style={{ height: 10, backgroundColor: '#F2F2F2' }} />
                        <View style={publishStyle.urlOuter}>
                            <Text
                                style={{
                                    color: skin.subtitle,
                                    flex: 1
                                }}
                            >
                                链接
                            </Text>
                            <TextInput
                                style={publishStyle.urlText}
                                clearButtonMode="while-editing"
                                returnKeyType="done"
                                underlineColorAndroid="transparent"
                                placeholderTextColor={skin.subtitle}
                                multiline={true}
                                placeholder="外部链接"
                                onChangeText={this._urlChange}
                                onBlur={Keyboard.dismiss}
                                defaultValue={this.state.url}
                                enablesReturnKeyAutomatically={true}
                                blurOnSubmit={true}
                                onSubmitEditing={this._onSubmitEditing}
                            />
                        </View>
                        <TouchableHighlight
                            onPress={this.clickPublish}
                            activeOpacity={1}
                            underlayColor={skin.tint}
                            style={publishStyle.buttonOuter}
                            disabled={this.state.canClick}
                        >
                            <View style={publishStyle.buttonText}>
                                <Text style={{ color: skin.tint, fontSize: 12 }}>发布</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                </ScrollView>
            );

原以为ScrollView在android以及ios中均可以显示右边的滚动条，亲身实践后意外的才发现只有android正常，ios并没有滚动条显示，最终解决的办法就是在ios的时候在ScrollView外套一层KeyboardAvoidingView，（android ios 分别做处理）

即：

…

render() {
        if (Platform.OS === 'ios') {
            return (
                <KeyboardAvoidingView behavior="padding" style={{ backgroundColor: skin.tint, flex: 1 }}>
                    <ScrollView
                        style={{ backgroundColor: skin.tint }}
                        ref={scrollView => {
                            _scrollView = scrollView;
                        }}
                    >
                        <View style={publishStyle.container}>
                            <View style={publishStyle.contentOuter}>
                                <TextInput
                                    style={publishStyle.contentText}
                                    clearButtonMode="while-editing"
                                    returnKeyType="done"
                                    ref="input"
                                    onBlur={Keyboard.dismiss}
                                    underlineColorAndroid="transparent"
                                    multiline={true}
                                    onChangeText={this._contentChange}
                                    maxLength={140}
                                    enablesReturnKeyAutomatically={true}
                                    blurOnSubmit={true}
                                    defaultValue={this.state.content}
                                    onSubmitEditing={this._onSubmitEditing}
                                />
                            </View>
                            <View
                                style={{
                                    marginTop: 10,
                                    height: 250,
                                    marginBottom: 10
                                }}
                            >
                                {this.createImageItem()}
                            </View>
                            <View style={{ height: 10, backgroundColor: '#F2F2F2' }} />
                            <View style={publishStyle.urlOuter}>
                                <Text
                                    style={{
                                        color: skin.subtitle,
                                        flex: 1
                                    }}
                                >
                                    链接
                                </Text>
                                <TextInput
                                    style={publishStyle.urlText}
                                    clearButtonMode="while-editing"
                                    returnKeyType="done"
                                    underlineColorAndroid="transparent"
                                    placeholderTextColor={skin.subtitle}
                                    multiline={true}
                                    placeholder="外部链接"
                                    onChangeText={this._urlChange}
                                    onBlur={Keyboard.dismiss}
                                    defaultValue={this.state.url}
                                    enablesReturnKeyAutomatically={true}
                                    blurOnSubmit={true}
                                    onSubmitEditing={this._onSubmitEditing}
                                    onFocus={this._urlOnFocus}
                                />
                            </View>
                            <TouchableHighlight
                                onPress={this.clickPublish}
                                activeOpacity={1}
                                underlayColor={skin.tint}
                                style={publishStyle.buttonOuter}
                                disabled={this.state.canClick}
                            >
                                <View style={publishStyle.buttonText}>
                                    <Text style={{ color: skin.tint, fontSize: 16 }}>发布</Text>
                                </View>
                            </TouchableHighlight>
                            {this.state.urlHasFocus ? <View style={{ height: 60 }} /> : null}
                        </View>
                    </ScrollView>
                </KeyboardAvoidingView>
            );
        } else {
            return (
                <ScrollView style={{ backgroundColor: skin.tint }}>
                    <View style={publishStyle.container}>
                        <View style={publishStyle.contentOuter}>
                            <TextInput
                                style={publishStyle.contentText}
                                clearButtonMode="while-editing"
                                returnKeyType="done"
                                ref="input"
                                onBlur={Keyboard.dismiss}
                                underlineColorAndroid="transparent"
                                multiline={true}
                                onChangeText={this._contentChange}
                                maxLength={140}
                                enablesReturnKeyAutomatically={true}
                                blurOnSubmit={true}
                                defaultValue={this.state.content}
                                onSubmitEditing={this._onSubmitEditing}
                            />
                        </View>
                        <View
                            style={{
                                marginTop: 10,
                                height: 250,
                                marginBottom: 10
                            }}
                        >
                            {this.createImageItem()}
                        </View>
                        <View style={{ height: 10, backgroundColor: '#F2F2F2' }} />
                        <View style={publishStyle.urlOuter}>
                            <Text
                                style={{
                                    color: skin.subtitle,
                                    flex: 1
                                }}
                            >
                                链接
                            </Text>
                            <TextInput
                                style={publishStyle.urlText}
                                clearButtonMode="while-editing"
                                returnKeyType="done"
                                underlineColorAndroid="transparent"
                                placeholderTextColor={skin.subtitle}
                                multiline={true}
                                placeholder="外部链接"
                                onChangeText={this._urlChange}
                                onBlur={Keyboard.dismiss}
                                defaultValue={this.state.url}
                                enablesReturnKeyAutomatically={true}
                                blurOnSubmit={true}
                                onSubmitEditing={this._onSubmitEditing}
                            />
                        </View>
                        <TouchableHighlight
                            onPress={this.clickPublish}
                            activeOpacity={1}
                            underlayColor={skin.tint}
                            style={publishStyle.buttonOuter}
                            disabled={this.state.canClick}
                        >
                            <View style={publishStyle.buttonText}>
                                <Text style={{ color: skin.tint, fontSize: 16 }}>发布</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                </ScrollView>
            );
        }
    }