ReactNative学习基础(一)

ReactNative最头痛之—-wrap_content match_parent

ReactNative之生命周期：
1、场景A组件中只定义Navigator，并设置B组件为第一个默认组件，B组件中调用自定义的C组件控件
首先需要了解组件生命周期有那几个函数：

componentWillMount(){

 }

 componentDidMount(){

}

shouldComponentUpdate(){
     return true;
 }

 componentWillUpdate(){

 }

 componentDidUpdate(){

 }

先解释说明一下生命周期的含义

执行后的：

http://www.tuicool.com/articles/nu6zInB

####Iconfont的使用：这是旧语法
1、下载对应的model
如：
npm install –save react-native-iconic-font
这时你会在当前RN项目下的找到你这个font的model,如图

2、Android将想要引入的ttf文件拷贝到指定的android assets/fonts/目录下
如图：

3、在app/build.gradle文件里添加compile指令：
compile ‘com.facebook.react:react-native:0.16.+’

4、在RN项目的js文件中去引用文字图标，代码如：

<Text style={{fontFamily: 'fontawesome', fontSize: 30}}>
                    {icon('twitter')}
                </Text>

这个注意属性fontFamily，值和导入的ttf文件的文件名必须保持一致。否则显示的是一个 ‘X’图标，是不正常的。

5、如果刷新查看不到具体效果，重新运行指令react-native run-android 安装app即可。

####Iconfont的使用：新语法
1、下载对应的model
https://github.com/qingsong-xu/react-native-vector-icons

2、引入到Android中进行编译
3、在app/build.gradle文件里添加compile指令：
compile project(‘:react-native-vector-icons’)
4、在RN项目中导入使用

import Icon from 'react-native-vector-icons/FontAwesome';

<TabNavigatorItem selected={this.state.selectedTab === '首页'}
                                  ......
                                  renderIcon={() => <Icon name="home" size={22} color="gray" />}
                                  renderSelectedIcon={() => <Icon name="home" size={22} color="#3b95d3" />}
                                  .........
                </TabNavigatorItem>

###自定义控件时，往往会发现不指定具体高度的时候组合控件会比ReactNative的单控件要高出很多，所以这里要知道，是需要指定具体控件高度的。

自定义控件时，涉及到PropsType指定属性，

ReactPropTypes = {
array: createPrimitiveTypeChecker('array'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
number: createPrimitiveTypeChecker('number'),
object: createPrimitiveTypeChecker('object'),
string: createPrimitiveTypeChecker('string'),
symbol: createPrimitiveTypeChecker('symbol'),

any: createAnyTypeChecker(),
arrayOf: createArrayOfTypeChecker,
element: createElementTypeChecker(),
instanceOf: createInstanceTypeChecker,
node: createNodeChecker(),
objectOf: createObjectOfTypeChecker,
oneOf: createEnumTypeChecker,
oneOfType: createUnionTypeChecker,
shape: createShapeTypeChecker


弄清楚具体控件属性的意思

####ListView实现GridView效果要领：
1、Listview中可以使用SrcollView的所有效果，包括：horizontal={true}，此属性使得排列方向为横向。但是若使用此属性后，会发现，items都会被渲染，只是方向改变而已，所以不能用此属性来实现GridView

2、ScrollView中有属性contentContainerStyle，此style是将定义的style应用到内容容器包裹的item中，说白了就是容器属性，所以设置此style为：

contentContainerStyle={
    {
     flexDirection: 'row',
        flexWrap: 'wrap',
     alignItems:'center',
     justifyContent:'center'
    }
}

首先设置内容为横向，其次设置子items为自动换行，alignItems:'center',justifyContent:'center'这两个属性只是为了让内容居中而已

###ReactNative全局变量如何创建和使用

可以的

哈哈

本文标题:ReactNative学习基础(一)

文章作者:qingsong.xu

发布时间:2017年5月3日 - 11时05分

最后更新:2017年6月29日 - 16时06分

原始链接:http://qingsong-xu.github.io/2017/05/03/ReactNative学习基础-一/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录