ReactNative登录界面善用原生组件

发布时间:2019-12-10 09:04:03 作者:Potato 阅读量:2107

ReactNative要善用原生组件
比如
这个button按钮效果
我们可以使用原生组件ActivityIndicator

import { ActivityIndicator} from 'react-native';

<Button block style={styles.loginButton} onPress={this.login.bind(this)} activeOpacity={1}>
                {
                    this.state.loginProgress
                    ? <ActivityIndicator color="white"/>
                    : <Text style={Theme.lightBold}>{i18n.t('login')}</Text>
                }
            </Button>

    1
    2
    3
    4
    5
    6
    7
    8
    9

一般登陆还会有个问题
就是键盘会把界面往上挤,这是我们可以调整原生组件KeyboardAvoidingView的behavior属性

import {  KeyboardAvoidingView } from 'react-native';
render() {
    return (
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
            {this.renderLogo()}
            {this.renderForm()}
        </KeyboardAvoidingView>
    );
}

支付宝打赏 微信打赏

我要评论

Catfish(鲶鱼) Blog V 4.7.3