5 - React Native从入门到入土 简单实现qq登录页

demo地址

A28CC64A-56A5-4672-885A-00637A58C53C.png

目标:理解React Native面向组件开发

0.桌面新建一个文件夹,打开终端创建一个新工程并运行

react-native init 你工程你的名字
cd 你工程的名字
react-native run-ios

A3E74E46-BA1B-4043-806A-464F498A07C3.png 4FA26CD0-D2B0-4A7A-91E1-5651158D3EDB.png

---

这个时候模拟器已经运行起来了

4DC5204D-1E3D-4F17-A49E-4C8F37565F35.png

1.用webStorm打开工程,等待读条

07074398-EA02-438D-9784-373D0D4A2A03.png

需要点击switch转换成webStorm可以识别的语言

B9063FAC-86B0-4869-A71F-DC623F52124E.png

---

081C5E21-0CC0-4649-BB2F-788E4AC8FBB3.png

先来看这个界面,如果在iOS中就是UIImageView,UITextFiled,UIButton,UILabel组成的页面,在react-native中也是差不多的下面是他们的对应关系

|oc| react - native |
| :---- | :----- | :----|:----- |
| UIImageView |Image |
| UITextFiled |TextInput |
| UILabel |Text |

UIButton以后再说

知道要了用哪些控件在react-native中需要导入这些控件

C1CD2C47-FACC-4C2D-A98E-9FE12FF93702.png

代码说明:

<控件的类名(我这样理解的) tyle={styles.loginTextStyle}(设置它是什么样式的) />

Image获取本地图片<Image source={require('./img/icon.png')}/> 图片的目录结构如图:

5094884F-FE3E-4903-843D-47F11CEBC4D1.png

---

获取当前屏幕的宽度

var Dimensions = require("Dimensions");
var width = Dimensions.get('window').width;

在其他的地方直接调用width即可

代码部分

export default class learnRN extends Component {
  render() {
    return (

        <View style={styles.container}>
        /// 创建一个头像Image,样式为iconnStyle}
         <Image source={require('./img/icon.png')} style={styles.iconnStyle} />
        /// 创建输入框,样式为.textInputStyle, placeholder是占位文字
          <TextInput placeholder={"请输入用户名"} style={styles.textInputStyle} />
          <TextInput placeholder={"请输入密码"} password={true} style={styles.textInputStyle} />
          <View style={styles.loginStyle}>
           <Text style={styles.loginTextStyle}> 登录</Text>

          </View>
          <View style={styles.settingStyle}>

            <Text style={styles.settingTextStyle}>无法登录</Text>
            <Text style={styles.settingTextStyle}>新用户</Text>

          </View>
          <View style={styles.otherStyle}>
            <Text>其他方式登录</Text>
            <Image source={require('./img/icon3.png')} style={styles.otherImageStyle}/>

            <Image source={require('./img/icon7.png')} style={styles.otherImageStyle}/>
            <Image source={require('./img/icon8.png')} style={styles.otherImageStyle}/>
          </View>
        </View>
    );

  }
}

const styles = StyleSheet.create({
  otherImageStyle: {
    height:50,
    width: 50,
    borderRadius:25,
    marginLeft:10

  },
  otherStyle: {
    /// 将侧轴设为横向
    flexDirection:'row',
    /// 竖向中心对齐
    alignItems:'center',
    /// 设置绝对位置
    position:'absolute',
    bottom:10,
    left:10,
  },
  settingTextStyle: {
    color:'black'
  },
  settingStyle: {
    /// 将侧轴设为横向
    flexDirection:'row',
    width: width,
     /// 设置为;两端对齐
    justifyContent:'space-between'
},
  loginTextStyle: {
    color:'white',

  },
  loginStyle:{
    height:35,
    width: width * 0.8,
    backgroundColor: 'blue',
    justifyContent:'center',
    alignItems:'center',
    marginTop:30,
    marginBottom: 10,
   /// 设置圆角
    borderRadius:5,


  },
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#dddddd',
  },


  iconnStyle: {
    marginTop:50,
    marginBottom: 30,

    width:80,
    height:80,
    borderRadius:40,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  textInputStyle:{
    height:38,
    width: width,
    marginBottom: 1,
    backgroundColor: 'white',
    textAlign:'center'
  },

});

组件开发

新创建一个loginView的js文件

将index.ios.js中所有代码赋值到loginView.js

将最后的代码

AppRegistry.registerComponent('learnRN', () => learnRN);

改成如下形式: module.exports和oc中return作用差不多返回这个类

module.exports = loginView;

同时修改类名为loginView

60E8153C-D45E-4C96-8DE0-446506D1A028.png

在index.ios.js中引入loginView这类

var LoginView = require('./loginView');

在主函数中实例化这个类

export default class learnRN extends Component {
  render() {
    return (

       <LoginView />
    )
  }
}

总结:

1.在webStorm中编写代码一定要不忘记,(逗号),也不要写错{}(大括号),因为在oc写错忘了写会报错,平时也没注意这个问题,今天在这里浪费了一点时间.

2.我发现在有时候写好代码不能刷新需要在终端react-native run-ios 或者xocde重新编译运行,目前还没找到好的办法