前端笔记5.RN界面设计

1. 上次课程回顾

React的基本语法：JSX、props、state。

 

2、本次课程内容

2.1、RN的界面开发

基于React-Native完成界面开发，需要在项目中编写App.js文件。

这个文件导出的组件就会显示到界面上。

在这个文件里使用的语法类似React，也是JSX，不过React-Native提供了一些默认封装好的组件来使用。

 

View：控制布局的组件，类似Android中的Layout组件，也是界面中的div。

       里面通过弹性盒模型来控制内容的比例，使用flex属性控制比例的大小。

Text：类似Android中的TextView，用来显示纯文本内容。

Image：类似Android中的ImageView，用来显示图片（本地或网络）

TextInput：类似Android中的EditText，用来设置输入框。

 

数据列表在RN中不再使用ListView，改为使用FlatList，该List支持下拉刷新和上拉加载的功能 。类似的还有一个SectionList，该List支持分组显示。

 

由于编写时，需要通过StyleSheet来建立样式表，而默认Atom不支持这种样式的提示，这里建议安装一个atom-react-native-style的插件，用来完成样式的提示。

 

 

 

2.2、View组件的使用

通过继承Component来建立导出的组件对象。

通过覆写render()方法来返回显示的内容，在这里实现建立Viewj进行分割界面的操作。

再通过StyleSheet控制界面的比例。

/**  * Sample React Native App  * https://github.com/facebook/react-native  *  * @format  * @flow  */   import React, {Component} from 'react'; import {StyleSheet,Text, View,Dimensions} from 'react-native';   var {height, width} = Dimensions.get('window');   const styles = StyleSheet.create({   container : {     flex: 1,     alignItems: 'center'   },   header : {     width:width-20,     flex:1,   },   content : {     width:width-20,     flex:3,     backgroundColor: "yellow"   },   footer : {     width:width-20,     flex:2,   },   middle1 : {     flex: 2,     backgroundColor: "red"   },   middle2 : {     flex: 2,     backgroundColor: "blue"   },   middle3 : {     flex: 1,     backgroundColor: "white"   },   middle4 : {     height: 1,     backgroundColor: "rgb(59, 255, 0)"   },   middle5 : {     flex: 2,     backgroundColor: "pink"   },   middle6 : {     flex: 2,     backgroundColor: "black"   } });       export default class App extends Component<Props> {   render() {     return (       <View style={styles.container}>         <View style={styles.header}>         </View>         <View style={styles.content}>             <View style={styles.middle1}>             </View>             <View style={styles.middle2}>             </View>             <View style={styles.middle3}>             </View>             <View style={styles.middle4}>             </View>             <View style={styles.middle5}>             </View>             <View style={styles.middle6}>             </View>         </View>         <View style={styles.footer}>         </View>       </View>     );   } }

 

之后就可以在里面加入图片、文本等内容进行填充。

/**  * Sample React Native App  * https://github.com/facebook/react-native  *  * @format  * @flow  */   import React, {Component} from 'react'; import {StyleSheet,Text, View,Dimensions,Image} from 'react-native'; import logo from './images/logo.png';   var {height, width} = Dimensions.get('window');   const styles = StyleSheet.create({   container : {     flex: 1,     alignItems: 'center'   },   header : {     width:width-20,     flex:1,   },   content : {     width:width-20,     flex:3,     backgroundColor: "yellow"   },   footer : {     width:width-20,     flex:2,   },   middle1 : {     flex: 2,     alignItems: 'center'   },   middle2 : {     flex: 2,     alignItems: 'center'   },   middle3 : {     flex: 1,     backgroundColor: "white"   },   middle4 : {     height: 1,     backgroundColor: "rgb(59, 255, 0)"   },   middle5 : {     flex: 2,     backgroundColor: "pink"   },   middle6 : {     flex: 2,     backgroundColor: "black"   },   image : {     width:width/4,     flex: 1,     borderWidth: 1,     borderColor: "black"   },   phoneNum : {     paddingTop: 5,     fontSize: 25,     color: "black",     fontWeight: 'bold'   } });       export default class App extends Component<Props> {   render() {     return (       <View style={styles.container}>         <View style={styles.header}>         </View>         <View style={styles.content}>             <View style={styles.middle1}>               <Image resizeMode="contain" style={styles.image} source={logo}></Image>             </View>             <View style={styles.middle2}>               <Text style={styles.phoneNum}>12345678901</Text>             </View>             <View style={styles.middle3}>             </View>             <View style={styles.middle4}>             </View>             <View style={styles.middle5}>             </View>             <View style={styles.middle6}>             </View>         </View>         <View style={styles.footer}>         </View>       </View>     );   } }

基于上面的代码，尝试将后面的内容补充完成

提示：密码框可以使用TextInput，如果想输入内容变为密码，有一个属性可以控制

 

文本框TextInput

 

文本框支持各种输入的类型以及键盘类型。

同时还可以用onChangeText事件来监听内容的改变。

secureTextEntry控制密码形式的输入，可以通过{true}设置为允许密码输入。

按钮：Button

支持onPress事件，可以点击后进行交互。

 

3、总结

能够使用各种RN的组件，完成基本的页面布局，配合样式进行美化。

 

4、作业与练习

实现微信的登录界面以及百度首页输入框部分的功能。