React Native 简单入门二

作者: 我是午饭 | 来源:发表于2017-12-11 19:42 被阅读106次

React Native介绍

React Native 是Facebook开源的一个跨平台移动应用开发框架。直白点说，借助React Native你可以直接使用JS来开发原生移动应用。

React和React Native

React也是Facebook开源的一个框架，一个JS UI 框架，React Native 是以React为一部分基础的衍生产品。也就是说，除了JavaScript，你还需要熟悉一下React这个UI框架，以便于更好的上手React Native。

安装

使用React Native开发原生APP时，除了JS的Node环境，还是需要配置好相关的原生开发环境。Android的JDK和Android Studio，IOS的XCODE，当然一般还会装一些辅助的工具，这里就不详细说明了，React Native中文网上有详细的开发环境搭建说明文档。

RN中文网 http://reactnative.cn/
RN官网 https://facebook.github.io/react-native/
我自己的简书博客 http://www.jianshu.com/p/138807f257e7

第一个RN应用

搭建好开发环境后，我们就可以使用RN开发原生APP了。在cmd中键入下列命令就可以生成一个RN的helloworld项目，并在android机器上运行起来

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

运行起来后就是下面的界面

image
可以看到界面中也给了我们相应的提示,打开工程根目录中的App.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

修改render()方法中的返回

render() {
        return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Hello React Native!
              </Text>
            </View>
        );
    }

然后选中模拟器双击键盘R,就更新界面了。

image
我们还可以使用Ctrl+M呼出开发者菜单，真机的话，摇一摇即可。

image
上图的菜单先简单介绍几个，Reload就是加载资源即为刷新，Enable Hot Reload为热加载，开启此选项，开发时代码变动，界面自动刷新。以后除非原生代码改动，可以使用npm start快速开启调试服务，不需要每次都运行react-native run-android
然后再回过头看下App.js的代码，可以发现React Native基本跟React是差不多的，只不过基础组件不是web组件而是原生组件。这里先列出RN的基础组件

AccessibilityInfo
ActivityIndicator
Button
CheckBox
DatePickerIOS
DrawerLayoutAndroid
FlatList
Image
KeyboardAvoidingView
ListView
ListView.DataSource
Modal
NavigatorIOS
Picker
PickerIOS
ProgressBarAndroid
ProgressViewIOS
RefreshControl
ScrollView
SectionList
SegmentedControlIOS
Slider
StatusBar
Switch
TabBarIOS
TabBarIOS.Item
Text
TextInput
ToolbarAndroid
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
View
ViewPagerAndroid
VirtualizedList
WebView

使用基础组件时先从react-native包中导入,比如我们使用Button时，先添加导入

import {
    Button
} from 'react-native';

然后在reder方法中返回

render() {
        return (
            <View style={styles.container}>
              <Button title={'hello rn'} onPress={()=>{
                alert('hello rn')
              }}/>
            </View>
        );
    }

各组件的使用可以阅读官方或中文网文档，有详细介绍。这里补充一些React的相关知识。前面的代码就有两个React的基础概念，Component组件和JSX语法，Component组件是React中很重要的一个概念，React组件使用render方法接收数据并输出JSX展示。上面代码中类似xml的写法就称为JSX，是react对js的一种语法扩展。JSX与xml语法类似，可以定义属性和子元素，不同的是通过{}来加入js表达式。接触过angular或vue的同学应该对这种写法会比较熟悉。再说明一点，JSX也是一种表达式，在编译以后也会转换成普通的js对象。也就说你可以像下面这么用

let text = <Text>hello rn</Text>

if(isAndroid)
{
    return <Text>hello android</Text>
}else
{
    return <Text>hello ios</Text>
}

let  txts = [];
txts.push(<Text>hello rn</Text>);

关于Component组件还有两个重要概念，props(属性)和state（状态）,在组件内我们通过props来访问传入的数据，比如说我们之前使用的button组件

<Button title={'hello rn'}/>

在Button类中,就可以通过props访问到

class MyButton extends Component{
    render ()
    {
        let title =this.props.title
        ...
    }
}

而state是用来保持组件内部状态的，当state改变时，组件会重新调用render()方法，刷新组件UI。

class MyButton extends Component{
    constructor(props){
        super(props);
        this.state={
            title:props.title
        }
    }
    onClick(){
        this.setState({title:'isClicked'})
    }
}

在constructor()构造方法中赋值，使用this.setState()方法更新state。

布局和样式

所有的基础组件都接收一个style属性，接收一个对象或数组，组件的宽高背景等等都是通过这个属性来定制的

<View style={{
                    height:100,
                    width:100,
                    backgroundColor:'red'
                }}>
                    ...
</View>

使用的样式名基本都遵循了web上的css命名，只是按照JS的语法规范使用了驼峰命名法，列如background-color改为backgroundColor，而且给宽高设置的尺寸都是没有单位的，表示与设备像素无关的逻辑像素点。补充说明一下单位转换和尺寸适配的问题，单位方面，一般现在UI会给我们PxCook的源文件，Android的话，对照相应密度的dp大小设置即可。IOS，对照相应倍图的pt大小设置即可。屏幕尺寸方面，因为布局采用的是flexBox，所以对不同的屏幕尺寸基本上能提供一致的布局结构。其他更细节的适配需求，现在并没有系统整理，以后再和大家分享交流。
然后再说下FlexBox布局，RN中的FlexBox布局和Web上的CSS基本一致，但有两点差异，flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。在平常开发的时候，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求，使用flexDirection决定布局的主轴，justifyContent决定子元素在主轴上的位置，alignItems决定子元素在次轴上的位置。举个栗子吧，这样比较形象一点，比如下图所示的界面

image
图中卡片布局的大致实现代码如下

            <View style={{alignItems:'center',justifyContent:'center',minHeight:100...}}>
                <Text style={{color:'white'...}}>
                    昨日票房 2017年11月7日
                </Text>
                <View style={{flexDirection:'row',alignItems:'center',marginTop:20...}>
                    <Text style={{color:'white',fontSize:24...}}>
                        701786
                    </Text>
                    <Text style={{color:'white',marginTop:10}}>
                        万
                    </Text>
                </View>
                <Text style={{color:'white',,marginTop:20...}}>
                    每日0点更新票房
                </Text>
            </View>

上面的代码只是大概布局思路，当然这个卡片的真正实现还用到了LinearGradient控件和ImageBackground控件。

页面跳转

我们一般使用React Navigation来构建多页面以及跳转页面，使用前要先安装

yarn add react-navigation

然后在app.js(如果你没改动index.js中的app组件注册的话)注册页面

import { StackNavigator } from 'react-navigation';
import Main from "./pages/main";
import NationwideDetail from "./pages/cinema/nationwideDetail";
import Cinema from "./pages/cinema/cinemaIndex";
import DatePickerPage from "./pages/common/datePickerPage";
import ForecastDetail from "./pages/cinema/forecastDetail";
import CinemaDetail from "./pages/cinema/cinemaDetail";

const RootNavigator = StackNavigator({
    NationwideDetail:{
      screen:NationwideDetail,
    },
    Cinema:{
        screen:Cinema
    },
    DatePickerPage:{
      screen:DatePickerPage
    },
    ForecastDetail:{
        screen:ForecastDetail
    },
    CinemaDetail:{
        screen:CinemaDetail
    }
});
export default RootNavigator;

最初显示第一个注册页面，注册完成之后，每个页面中的props属性可以获得navigation对象，通过navigation对象进行页面跳转

this.props.navigation.navigate('NationwideDetail')

也可以携带参数

this.props.navigation.navigate('NationwideDetail',{name:'wuHuaRong'})

参数在navigation.state.params.name中获取。

返回页面

我们还可以通过navigation.goBack()方法关闭当前页面返回上个页面，navigation.goBack('NationwideDetail')可以指定回到某个页面。如果还想关闭页面时返回某个值，类似android中的startActivityForResult,需要再集成redux状态机来管理多个页面之间的共享状态。此部分，先不详细说明了。

网络请求

RN提供了与web一致的Fetch API，也允许使用XMLHttpRequest API，以及基于XMLHttpRequest的第三方库frisbee或是axios，此部分文档有详细说明就不再赘诉了。

触摸

简单的点击和长按事件可以使用官方提供的四个Touchable控件，TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback

<TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton}>
        <Text>Button</Text>
</TouchableHighlight>

上下左右滑动可以使用ScrollView组件，复杂的手势请参考PanResponderAPI

异步问题

因为RN中只有一个JS执行线程，是不能直接开启一个异步线程的来执行耗时操作的，但是可以使用InteractionManager来保障UI的渲染性能的。

InteractionManager.runAfterInteractions(() => {
   // ...需要长时间同步执行的任务...
});

资源引用

使用require方法来引用项目中的静态资源，如.png,.mp3,.wav,mp4,.mov,.html和.pdf等
比如Image控件的使用

<Image source={require('./my-icon.png')} />

React Native 简单入门二

React Native介绍

React和React Native

安装

第一个RN应用

布局和样式

页面跳转

返回页面

网络请求

触摸

异步问题

资源引用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native 简单入门 二

React Native介绍

React和React Native

安装

第一个RN应用

布局和样式

页面跳转

返回页面

网络请求

触摸

异步问题

资源引用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native 简单入门二