React Native踩坑记

导航栏

react-navigation实现页面导航布局效果

博客地址（有演示和讲解）

图标库

需要先下载 rnpm          npm install rnpm

再下载图标库   npm install react-native-vector-icons

再用rnpm 连接图标库   rnpm link  npm react-native-vector-icons

使用

图标库查看地址

文件头部

var Icon = require('react-native-vector-icons/Ionicons')

最后这个斜杠 + Ionicons     是选择的图标库类

图

结果发现图片是个问号

字体文件缺失

需要再Android与iOS工程里面进行相应的配置

安卓配置

1.android/app/build.gradle 中添加

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

2. 从react-native-vector-icons 复制你需要的字体文件

到android/app/src/main/assets/fonts/  下

iOS配置参照官网：https://www.npmjs.com/package...

成功

数据请求

不能直接访问localhost接口

需要输入ipconfig来获取ip4的地址 替换 localhost

报错

TypeError:undefined is not a function

组件调用方法的时候，要把this绑进去

onEndReached={this._fetchMoreData.bind(this)}

组件

ListView

onEndReached方法

开始数据为空，加载第一页的数据时，会触发onEndReached方法

所以初始化的时候，加载两次数据

视频组件  react-native-video

npm install react-native-video

react-native link

```

import Video from 'react-native-video';

export default class Detail extends Component {

render(){

        return (

                        source={{uri:'http://www.thinktown.com/video/th.mp4'}} //网络视频

                        rate={1.0} //1.0表示默认速率

                        volume={3}  //声音大小

                        paused={false}  //默认播放

                        resizeMode='contain' //图片等比例缩放 cover

                        repeat={false} //不重复播放

                        volume={1.0} //默认音量

                        muted={false} //是否静音

                        style={styles.backgroundVideo} //样式

                        /> 

            );

    }

}

```

报错 

undefined is not an object (evaluating NativeModuels.UIManager.RCTVideo.Constants')

依次执行:

1.npm i -S react-native-video

2.react-native link

3.然后重启模拟器试(也可以把应用从模拟器删除clean 之后重新 run)