3

当键盘出现时,有什么特别的事情可以让视图向上滑动吗?根据我看到的所有示例,默认情况下它会这样做,但在我这边,它直接从 A 点到 B 点。

这是我的渲染,其中 FadeInView 只是一个 Animated.View:

<FadeInView style={{ flex: 1 }}>
                <KeyboardAvoidingView
                    style={s.container}
                    contentContainerStyle={{alignItems: 'center'}}
                    behavior="position"
                    keyboardVerticalOffset={-80}
                >
                    <View style={{
                        width: 100, height: 100, borderWidth: 1,
                        borderColor: '#E0E0E0', marginBottom: 30,
                    }} />
                    <Item>
                        <Input
                            placeholder={t('login:username')}
                            onChangeText={(username) => { username = username.trim(); return this.setState({ username }); }} />
                    </Item>
                    <Item style={{ marginBottom: 10 }}>
                        <Input
                            secureTextEntry={true}
                            placeholder={t('login:password')}
                            onChangeText={(password) => { password = password.trim(); return this.setState({ password }); }} />
                    </Item>
                    {isFetching ?
                        <TouchableOpacity
                            disabled={true}
                            style={cs.button}
                            onPress={() => this.onLogin()}>
                            <Text>{t('common:loading').toUpperCase()}</Text>
                        </TouchableOpacity>
                        :
                        <TouchableOpacity
                            activeOpacity={0.7}
                            style={cs.button}
                            onPress={() => this.onLogin()}>
                            <Text style={cs.buttonText}>{t('login:login').toUpperCase()}</Text>
                        </TouchableOpacity>
                    }
                    {errorMessage != null &&
                        <Text style={cs.errorMessage}>{errorMessage}</Text>
                    }
                </KeyboardAvoidingView>
            </FadeInView>

和容器样式:

const s = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        paddingTop: 50,
        paddingRight: 20,
        paddingLeft: 20,
    },
});

对不起,大代码,但我对这个问题有点绝望......谢谢!

4

0 回答 0