第五课 登录界面开发

简单介绍了下Baker工具，这节课我们是来实战一下，开发一个登录界面。

首先，我们在开发APP的时候，如果能使用React Native自带的组件的话，尽量使用React Native自带的组件，我们也会充分利用开源的组件。

使用到的开源组件，我们通过npm install -S先把这两个包装上（注意安装客户端使用的包需要进入到app目录下）：

1、 react-native-textinput-effects

2、apsl-react-native-button

这部分设计到的东西很难用文字描述出来，请大家关注我的微信公众号：ReactNative实战，我会录好视频后再微信公众号内群发。

微信公众号

具体的步骤：

npm run generate

因为我们的登录界面和Redux没有关系，根据第五课当中讲的，我们选择Component，然后给组件取名为“LoginPage”，选择模板为“Vanila”，因为个页面很多东西都需要我们自己动手开发，其他的几个都不适用，Vanila最简单。在是否需要区分ios和android的选否，这样我们的“LoginPage”就建好了，Baker会帮我们在app/src/components目录下新建了一个LoginPage的目录，这就是我们组件所在的目录，是不是很简单。在LoginPage目录下有三个文件：index.js（代码文件）、index.text.js（测试文件）、styles.js（样式文件）。下面就是具体完善界面了。

AddressBook/app/src/components/App/index.js

这是我们程序的入口文件（当然这是不严谨的说法，其实入口文件应该是index.ios.js和index.android.js然后再加载src/setup.js，再加载src/components/App/index.js），我们在这个文件里import我们新建的LoginPage组件。

import LoginPage from 'LoginPage';

在render方法中渲染LoginPage组件。

在模拟器中reload下，看到的就是我们的LoginPage了，下面开始根据设计的原型图开发LoginPage组件。

最终效果，跟原形设计有点区别（更漂亮了，哈哈），这里不能插入视频，请关注我上面的微信查看演示效果。

IOS登录界面

andorid登录界面

【React Native实战】企业通信录登录界面演示

如果遇到下面这个警告：

Warning encountered 1 time.

`useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`

解决办法：进入到app目录，运行命令react-native link react-native，然后再react-native run-ios一下就OK了。.