美文网首页
ReactNative github 模拟项目记录

ReactNative github 模拟项目记录

作者: 耳_总 | 来源:发表于2017-09-20 22:26 被阅读41次

创建项目

命令:cd xxxx 目录
react-native init 工程名字
用webstrom打开

知识点记录:

  • 当属性为一个组价类型的时候,如果在使用次组件的时候如果没有这个属性值,则会报错,这时候需要为其制定类型PropTypes.element,加入有个navBtn属性:
static propTypes = {
        rightBtn: PropTypes.element,
    }
  • 在使用Navigator的时候新版的RN会报错:
ExceptionsManager.js:63 Navigator is deprecated and has been removed 
from this package. It can now be installed and imported from `react-native-
deprecated-custom-components` instead of `react-native`. Learn about 
alternative navigation solutions at http://facebook.github.io/react-
native/docs/navigation.html
  • 发现一个很奇怪的现象当我使用Navigation的时候,无论是使用navigator进行跳转:
const {navigate} = this.props.navigation;
        return <View style={styls.container}>
            <NavigationBar title={'我的'}/>
            <Text onPress={() => navigate('CustomKey',{name:'自定义标签'})}>自定义标签</Text>
        </View>

还是取值navigator从上一个页面跳转过来的值的时候:

const {params} = this.props.navigation.state;
        return <View style={styls.container}>
            <NavigationBar title={'自定义标签'}/>
            <Text>{params.name}</Text>
        </View>

都必须是这种写法,如果是这种将取不到值的:

return <View style={styls.container}>
            <NavigationBar title={'自定义标签'}/>
            <Text>{this.props.navigation.state.name}</Text>
        </View>
  • Navigation返回的话用navigation.goBack(null);方法

  • 当我们放置了视图而没有看到相应的效果的时候,往往是视图没有设置相应的宽高,或者fex:1

  • 当一个回调函数不需要传参数的时候可以直接把函数名赋值给回调属性,如果需要传递参数的话,就需要函数后面带有括号,这样的话就变成调用函数了,这时候需要箭头函数来包裹

  • Object.keys(arr) 会返回数组包含数组所有的下标值,或者一个对象的所有的属性

  • 在render()函数的return 中 返回的组件一定要和return在同一行,否则没有效果。

  • forceUpdate()强制重新渲染

资料

https://github.com/expo/react-native-tab-navigator
npm install react-native-tab-navigator --save
http://blog.csdn.net/jing85432373/article/details/54342756

npm install --save react-navigation

碰到的问题:

我在mac上前一天盖上盖子后,react的服务挂起了,第二天在引用项目的时候回报错:找不到这个模块,但是明明有啊,点进去还是也有代码联想啊!关掉重启就好了。

待研究的——Navigation

相关文章

网友评论

      本文标题:ReactNative github 模拟项目记录

      本文链接:https://www.haomeiwen.com/subject/cibdtxtx.html