React Native(十三)——ios鍵盤擋住textInput

漸入佳境

        用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>
            );
        }
    }

        這樣就解決了android 以及ios中鍵盤被擋住事件的問題。