学习博客园开源代码笔记（登录页面）

效果图：

  render() {
    return (
      <View style={ [ComponentStyles.container] }>
        { this.renderHeader() }
        <ScrollView
          keyboardShouldPersistTaps = {'always'}>
          { this.renderFormPanel() }
        </ScrollView>
        { this.renderCopyRight() }
        { this.renderPending() }
      </View>

    );
  }

这是渲染的主代码，渲染部分分为了几个部分，这样写的好处可以代码更清晰，维护起来要简单一些。如果把所有的render都写在这里也可以，但比较乱。

renderPending(){
    if(this.state.pending === true){
      return (
        <Spinner style={ ComponentStyles.pending_container }/>
      )
    }
  }

当点击登录的时候会访问网络，在返回结果前会显示这个控件，Spinner是封装的ActivityIndicator：

class Spinner extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={[ CommonStyles.m_a_4, this.props.style ]}>
                <ActivityIndicator 
                    animating  = { true }
                    size = { 'large' }
                    color={ StyleConfig.color_primary } 
                    {...this.props} />
            </View>
        )
    }
}

如果把这个控件放到navigator下面，是不是就可以实现整个app的loading呢？就想开篇说的Plugin一样，理论上是可以实现的。

问题：
1、项目中用到了@remobile/react-native-toast，这个第三方在react-native 0.43以上版本无法编译通过。

登录界面相对还是比较简单的，登录的逻辑部分中包含加密和请求服务器，这部分我们暂时不做介绍，后面我们专门说下这部分。