热门搜索 :
考研考公
您的当前位置:首页正文

1. React Native学习-登陆页面

来源:东饰资讯网

这里使用WebStorm, 使用的是JSX语法
效果图:
安卓:


Android.png

苹果:


iOS.png

首先创建一个自定义的公共组件loginView.js, 分别在index.ios.jsindex.android.js中分别导入这个组件, 就可以同时在这两个程序上运行了,
导入如下:

// 引入外部的js文件
var LoginView = require('./loginView');
class RN_GY extends Component {    
render() {        
  return (            
    // 调用外部的组件,面向组件的开发
    //每个类可以看做一个组件                
    <LoginView />       
         );    
}}

所以我们只要写好这个登陆的组件就可以了, Let`s go...

  1. 首先引入需要的系统组件 (不知道为什么WebStorm的代码用markdown编辑格式不对, 只能截图了)


    引入.png
  2. 创建控件: 这里为了适配苹果安卓, 用的Dimensions来获取屏幕宽高

    创建控件.png
  3. 进行布局 使用flex布局, 并输出这个组件

布局1 布局2.png
Top