React Native - 使用 KeyboardAvoidingView 在 TextInput 中向上移动屏幕

Question

我有一些 TextInputs 的视图，其中一些在屏幕的底部。问题是我希望屏幕在我点击它们时向上移动，这样我就可以看到我在写什么。我搜索了很多，但对我没有任何作用，我的视图嵌套在 KeyboardAvoidingView 中，但是当我单击 TextInput 时没有任何反应。这是我的代码：

        <KeyboardAvoidingView
            keyboardVerticalOffset={64}
            style={{ flex: 1 }}
        >
            <View style={styles.screen}>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                    <TextInput
                        value={title}
                        onChangeText={text => setTitle(text)}
                        style={styles.singleLineTextInput}
                        placeholder="Title"
                    />

                    <TextInput
                        value={keywords}
                        onChangeText={text => setKeywords(text)}
                        style={styles.singleLineTextInput}
                        placeholder="Keywords"
                    />

                    <TextInput
                        value={description}
                        onChangeText={text => setDescription(text)}
                        style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
                        placeholder="Description"
                        multiline={true}
                        autoFocus={true}
                    />
                </TouchableWithoutFeedback>
            </View>
        </KeyboardAvoidingView >

还有我的风格：

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        padding: 16,
        alignItems: 'center'
    },
    singleLineTextInput: {
        width: DEVICE_WIDTH * 0.8,
        borderColor: 'black',
        borderBottomWidth: 2,
        fontSize: 16,
        paddingHorizontal: 16
    },
    descriptionTextInput: {
        maxHeight: DEVICE_HEIGHT / 4
    }
});

我正在使用 React-Navigation，我尝试将 keyboardVertialOffset 和 behavior 更改为多个值，但没有任何反应。有什么想法吗？
提前致谢

Answer 1

从原生库导入内容

import { Content } from 'native-base';

并从 react-native 导入平台

import { Platform } from 'react-native';

并像这样在代码中使用内容和平台：

    <KeyboardAvoidingView
           behavior={Platform.Os == "ios" ? "padding" : "height"} 
            style={{ flex: 1 }}
        ><Content>
            <View style={styles.screen}>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                    <TextInput
                        value={title}
                        onChangeText={text => setTitle(text)}
                        style={styles.singleLineTextInput}
                        placeholder="Title"
                    />

                    <TextInput
                        value={keywords}
                        onChangeText={text => setKeywords(text)}
                        style={styles.singleLineTextInput}
                        placeholder="Keywords"
                    />

                    <TextInput
                        value={description}
                        onChangeText={text => setDescription(text)}
                        style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
                        placeholder="Description"
                        multiline={true}
                        autoFocus={true}
                    />
                </TouchableWithoutFeedback>

            </View>
           </Content>

        </KeyboardAvoidingView>

希望这会有所帮助！