react-native研究笔记

react-native

rn搭建开发环境

1. 必须安装

   1. brew install node(或者全局安装node)
   2. brew install watchman and flow
   3 . 初始化项目
   react-native init AwesomeProject
   cd AwesomeProject
   react-native run-ios
   

2. 直接打开xcodeproj

   报错：8081端口被占用，于是关掉php-fpm
   

3. over

Props(属性) & State

1. 系统组件使用props

   <Image source={pic} style={{width: 193, height: 110}} />
   

2. 自定义组件使用props

   // 需要在constructor中初始化state
   class Greeting extends Component {
     constructor(props) {
       super(props);
       this.state = {showText: true};
       setInterval(() => {
         this.setState(previousState => {
           return {showText: !previousState.showText};
         });
       }, 1000);
     }
     render() {
       let display = this.state.showText ? this.props.name : '';
       return (
         <View>
           <Text>Hello I am {this.props.name}!</Text>
           <Text>{display}</Text>
         </View>
       );
     }
   }
   

3. over

基础

1. 样式

   样式名基本上是遵循了web上的CSS的命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

2. 宽度和高度

   最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。

   在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。

3. 使用Flexbox布局

   • 在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

   • 在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

   • 在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

4. 处理文本输入

   <TextInput
             style={{height: 40}}
             placeholder="Type here to translate!"
             onChangeText={(text) => this.setState({text})}
           />
   

5. 使用滚动视图

   scrollview

6. 使用长列表

   React Native提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。

    <FlatList data={[
             {key: 'Devin'},
             {key: 'Jackson'}
           ]} 
           renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
           /> 
   
   如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择.
   

7. 网络

   1. 使用Fetch
   getMoviesFromApiAsync() {
       return fetch('https://facebook.github.io/react-native/movies.json')
         .then((response) => response.json())
         .then((responseJson) => {
           return responseJson.movies;
         })
         .catch((error) => {
           console.error(error);
         });
     }
   2. 或者使用ES7
   // 注意这个方法前面有async关键字
     async getMoviesFromApi() {
       try {
         // 注意这里的await语句，其所在的函数必须有async关键字声明
         let response = await fetch('https://facebook.github.io/react-native/movies.json');
         let responseJson = await response.json();
         return responseJson.movies;
       } catch(error) {
         console.error(error);
       }
     }
   
   3. 使用XMLHttpRequest API
   var request = new XMLHttpRequest();
   request.onreadystatechange = (e) => {
     if (request.readyState !== 4) {
       return;
     }
   
     if (request.status === 200) {
       console.log('success', request.responseText);
     } else {
       console.warn('error');
     }
   };
   
   request.open('GET', 'https://mywebsite.com/endpoint/');
   request.send();
   
   4. React Native还支持WebSocket
   var ws = new WebSocket('ws://host.com/path');
   
   ws.onopen = () => {
     // 打开一个连接
   
     ws.send('something'); // 发送一个消息
   };
   
   ws.onmessage = (e) => {
     // 接收到了一个消息
     console.log(e.data);
   };
   
   ws.onerror = (e) => {
     // 发生了一个错误
     console.log(e.message);
   };
   
   ws.onclose = (e) => {
     // 连接被关闭了
     console.log(e.code, e.reason);
   };
   

8. over

RN原理

1. ​

RN进阶

1. 集成到现有原生应用

   1. 项目根目录下创建package.json文件
   {
     "name": "MyReactNativeApp",
     "version": "0.0.1",
     "private": true,
     "scripts": {
       "start": "node node_modules/react-native/local-cli/cli.js start"
     },
     "dependencies": {
       "react": "16.5.3",
       "react-native": "0.55.3"
     }
   }
   #可以根据npm info react-native & react查找rn的依赖包版本
   2. npm install 
   3. 新建iOS项目并 pod init & pod install 
   4. Podfile文件如下：
   # target的名字一般与你的项目名字相同
   target 'NumberTileGame' do
   
     # 'node_modules'目录一般位于根目录中
     # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
     pod 'React', :path => '../node_modules/react-native', :subspecs => [
       'Core',
       'CxxBridge', # 如果RN版本 >= 0.45则加入此行
       'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
       'RCTText',
       'RCTNetwork',
       'RCTWebSocket', # 这个模块是用于调试功能的
       # 在这里继续添加你所需要的RN模块
     ]
     # 如果你的RN版本 >= 0.42.0，则加入下面这行
     pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
   
      # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
     pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
     pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
     pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
   
   end
   
   #此处多处报错，待重头来捣鼓一下。
   
   5. 开发
   创建index.js文件 RCTRootView跳转到对应的js页面
   

2. ReactNavigation

   社区今后主推的方案是一个单独的导航库react-navigation，它的使用十分简单。

3. 颜色&背景图片&触摸事件

   <Image source={require('./my-icon.png')} />
   <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} /> #Xcode静态文件
   网络图片
   // 正确
   <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
          style={{width: 400, height: 400}} />
   缓存控制
   本地系统文件：相册
   背景图片
    <ImageBackground source={...}>
       <Text>Inside</Text>
     </ImageBackground>
     <TouchableHighlight onPress={this._onPressButton}>
           <Text>Button</Text> </TouchableHighlight>                          长按 onLongPress
   手势
   

4. 动画

   1. 使用Animated库
   Animated仅封装了四个可以动画化的组件：View、Text、Image和ScrollView，不过你也可以使用Animated.createAnimatedComponent()来封装你自己的组件。
   2. over
   

5. 定时器

   componentDidMount() {
       this.timer = setTimeout(
         () => { console.log('把一个定时器的引用挂在this上'); },
         500
       );
     }
     componentWillUnmount() {
       // 请注意Un"m"ount的m是小写
   
       // 如果存在this.timer，则使用clearTimeout清空。
       // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
       this.timer && clearTimeout(this.timer);
     }
   只需铭记在unmount组件时清除（clearTimeout/clearInterval）所有用到的定时器
   

6. 直接修改Dom节点

   setOpacityTo: function(value) {
     // Redacted: animation related code
     this.refs[CHILD_REF].setNativeProps({
       opacity: value
     });
   },
   

7. over

RN调试和性能相关

1. 调试

   1. 模拟器Command⌘ + D || 快捷键 通过摇晃设备或是选择iOS模拟器的"Hardware"菜单中的"Shake Gesture"选项来打开开发菜单
   2. Command⌘ + R 刷新js
   3. Chrome开发者工具
   在开发者菜单中选择"Debug JS Remotely"选项，即可以开始在Chrome中调试JavaScript代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui.
   在Chrome的菜单中选择Tools → Developer Tools可以打开开发者工具，也可以通过键盘快捷键来打开（Mac上是Command⌘ + Option⌥ + I
   4. 
   

2. 自动化测试

3. JS环境

   React Native从0.5.0版本开始已经内置Babel转换器

4. 性能

5. 升级

6. 手势

RN常用组件

1. Button & Switch & Slide & Text & View & TouchableHightlight&TouchableOpacity

2. DatePickerIOS

3. Image

4. TextInput

5. RefreshControl

RN列表

1. ScrollView
2. SectionList
3. ListView
4. ListView.DataSource
5. FlatList

RN导航栏

1. NavigatorIOS
2. TabBarIOS
3. SegmentedControlIOS
4. ​

RN其他组件

1. WebView

List组件

参考文献：https://blog.csdn.net/lx520aa/article/details/77140737