React-native 介绍

由来：

Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台，同年9月份，该开源项目同时支持Android平台。

原理：

在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Image>替代<im g>等。

优点：

能够用JavaScript脚本就可以写出App的界面，从前端角度而言，React Native跨平台特性，不要开发者深入的了解各平台就能开发一款高效App。

Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png

组件化：

Paste_Image.png Paste_Image.png Paste_Image.png

Props(当前组件只读):

Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png

State(当前组件私有)：

当 state 更新之后，组件就会重新渲染自己。
render() 方法依赖于 this.props 和 this.state ，框架会确保渲染出来的 UI 界面总是与输入（ this.props 和 this.state ）保持一致。

Paste_Image.png Paste_Image.png Paste_Image.png

组件生命周期

Paste_Image.png

1.Mounting：已插入真实 DOM

2.Updating：正在被重新渲染

3.Unmounting：已移出真实 DOM

Mounting(装载):

getInitialState(): 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
componentWillMount()：服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。
componentDidMount()：在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。

Updating (更新)：

componentWillReceiveProps(object nextProps)： 在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。

shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用。如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。(PS:重写此方法可以根据实际情况，来灵活的控制组件当 props 和 state 发生变化时是否要重新渲染组件。)

componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之后，render() 渲染之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。
注意：你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。

componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。

Unmounting(移除):

componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png

图片引用

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

如果你有my-icon.ios.png和my-icon.android.png，Packager就会根据平台而选择不同的文件。

你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。比如下面这样的代码结构：

.
├── button.js
└── img
    ├── check@2x.png
    └── check@3x.png
静态图片资源
<Image source={require('./img/check.png')} />

Packager会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说，iPhone 5s会使用check@2x.png，而Nexus 5上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。

Paste_Image.png

网络图片
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

混合App的图片资源
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸。

通过嵌套来实现背景图片
return (
  <Image source={...}>
    <Text>Inside</Text>
  </Image>
);

导航 React Navigation

import MainScreenfrom './src/MainScreen';
import ProfileScreenfrom './src/ProfileScreen';
import {
  StackNavigator,
} from 'react-navigation';

const App = StackNavigator({
  Main: {screen: MainScreen},
  Profile: {screen: ProfileScreen},
});

class MainScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('Profile', { name: 'Jane' });
        }
      />
    );
  }
}

触摸事件

 render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>  // onLongPress
        <Text>Button</Text>
      </TouchableHighlight>
    );
  }

原生按钮：
一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。

TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

PanResponder

 this.panResponder = PanResponder.create(
      {
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState)=> true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
        onPanResponderGrant: (evt, gestureState)=>{
          this.setState({
            initY: gestureState.y0
          });
        },
        onPanResponderMove: (evt, gestureState)=>{},
        onPanResponderRelease: (evt, gestureState)=>{
          slideEvent(gestureState.moveY);
        }
      }
    )

打包APK