ReactNative登录界面善用原生组件

ReactNative要善用原生组件比如这个button按钮效果我们可以使用原生组件ActivityIndicatorimport { ActivityIndicator} from 'react-native';<Button block style={styles.loginButton} onPress={this.login.bind(this)} activeOpaci...

土豆.exe

220人浏览 · 2019-12-10 09:04:03

土豆.exe · 2019-12-10 09:04:03 发布

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>

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

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