KeyboardAvoidingView работает на EXPO, но не на APK? - PullRequest
Новая
       7

KeyboardAvoidingView работает на EXPO, но не на APK?

0 голосов
/ 31 августа 2018

Я купил эту тему, которая в Экспо работает безупречно, но как только я создаю APK, клавиатура покрывает весь экран и не будет работать, как предполагалось.

Я использую expo для тестирования, и он отлично работает. 

 return (
            <SafeAreaView style={styles.container}>
                <NavHeader title={thread.name} {...{navigation}} />
                <FlatList
                    inverted
                    data={messages}
                    keyExtractor={message => `${message.date}`}
                    renderItem={({ item }) => (
                        <Msg message={item} name={item.me ? name : thread.name} picture={thread.picture} />
                    )}
                />
                <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} enabled>
                    <View style={styles.footer}>
                        <TextInput
                            style={styles.input}
                            placeholder="Write a message"
                            value={this.state.message}
                            onChangeText={message => this.setState({ message })}
                            autoFocus
                            blurOnSubmit={false}
                            returnKeyType="send"
                            onSubmitEditing={this.send}
                            underlineColorAndroid="transparent"
                        />
                        <TouchableOpacity primary transparent onPress={this.send}>
                            <Text style={styles.btnText}>Send</Text>
                        </TouchableOpacity>
                    </View>
                </KeyboardAvoidingView>
            </SafeAreaView>
        );

И стили 

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    footer: {
        borderColor: Theme.palette.lightGray,
        borderTopWidth: 1,
        paddingLeft: Theme.spacing.small,
        paddingRight: Theme.spacing.small,
        flexDirection: "row",
        alignItems: "center"
    },
    input: {
        height: Theme.typography.regular.lineHeight + (Theme.spacing.base * 2),
        flex: 1
    },
    btnText: {
        color: Theme.palette.primary
    }
});

Я попробовал следующий плагин

с помощью enableOnAndroid prop

https://github.com/APSL/react-native-keyboard-aware-scroll-view

безуспешно.

Я разместил здесь:

https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/305

и здесь:

https://github.com/expo/expo/issues/2172

1 Ответ

0 голосов
/ 05 сентября 2018

В зависимости от сложности макета экрана, вы можете добавить нижнее поле или отступ, используя Клавиатура прослушиватели, предоставленные React Native. 

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
    componentDidMount () {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
    }

    componentWillUnmount () {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow () {
        this.setState({
            marginBottom: 400
        })
    }

    _keyboardDidHide () {
        this.setState({
            marginBottom: 0
        })
    }

    render() {
        return (
            <TextInput
                style={{marginBottom: this.state.marginBottom}}
                onSubmitEditing={Keyboard.dismiss}
            />
        );
    }
}
...