React Native:KeyboardAvoidingView没有动画

时间:2017-07-04 15:09:37

标签: animation react-native keyboard textinput react-animated

当键盘出现时,是否有任何特殊操作可以使视图向上滑动? 根据我看到的所有例子,它默认情况下会这样做,但在我这边直接从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,
    },
});

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

0 个答案:

没有答案