这里使用WebStorm, 使用的是JSX语法
效果图:
安卓:
Android.png
苹果:
iOS.png
首先创建一个自定义的公共组件loginView.js
, 分别在index.ios.js
和index.android.js
中分别导入这个组件, 就可以同时在这两个程序上运行了,
导入如下:
// 引入外部的js文件
var LoginView = require('./loginView');
class RN_GY extends Component {
render() {
return (
// 调用外部的组件,面向组件的开发
//每个类可以看做一个组件
<LoginView />
);
}}
所以我们只要写好这个登陆的组件就可以了, Let`s go...
-
首先引入需要的系统组件 (不知道为什么WebStorm的代码用markdown编辑格式不对, 只能截图了)
引入.png -
创建控件: 这里为了适配苹果安卓, 用的
创建控件.pngDimensions
来获取屏幕宽高
-
进行布局 使用flex布局, 并输出这个组件