ReactNative学习笔记(二)基础进阶

2021年09月15日 阅读数:1
这篇文章主要向大家介绍ReactNative学习笔记(二)基础进阶,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

一个最简单的HelloWorld页面

先很少解释,直接上代码:javascript

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

export default class helloworldComponent extends Component
{
	render()
	{
		return (
			<View style={styles.container}>
				<Text style={styles.welcome}>Hello World!</Text>
			</View>
		);
	}
}

const styles = StyleSheet.create(
{
	container:
	{
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},
	welcome:
	{
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
	}
});

// 这句话就至关于Java里面的main函数,不用特别深刻了解,知道便可
// 第一个参数的'helloworld'必须跟你的项目名同样
AppRegistry.registerComponent('helloworld', () => helloworldComponent);

官方推荐使用ES6语法,不熟悉ES6的同窗可能看起来感受这彻底不是JS代码,能够先看看这篇文章熟悉一下区别:css

react-react-native-的es5-es6写法对照表html

对于Android平台而言,index.android.js就是整个项目的入口,AppRegistry.registerComponent则是入口中的main函数。我通常习惯index.android.js中只简单的写两三行代码,其它的以组件的形式加载进来:java

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';

import MainPage from './views/MainPage';

// 注意,这里用引号括起来的'helloworld'必须和你init建立的项目名一致
AppRegistry.registerComponent('helloworld', () => MainPage);

JSX语法

React.js基础的话可能会很熟悉这个,我在学习ReactNative的时候没有接触过React.js,因此有些吃亏。react

JSX能够看作是内嵌在JS中的一段xml代码,不须要引号包裹,放在这个里面:render(){ return (JSX);}{}表示里面是一个变量或者表达式,和jsp的${}相似。android

注意每一个render里面返回的XML根节点只能是一个,像下面这样的写法是错误的:es6

render()
{
	return (
		<Text>Hello World!</Text>
		<Text>Hello World!</Text>
	);
}

只能另外用一个组件把它包裹,好比<View>react-native

render()
{
	return (
		<View>
			<Text>Hello World!</Text>
			<Text>Hello World!</Text>
		</View>
	);
}

动态拼接JSX

由于JSX不是普通的字符串,咱们无法像拼接字符串同样拼接它,但仍是有办法的。JSX里面能够随意内嵌表达式:网络

class TestComponent extends Component
{
	constructor(props)
	{
		super(props);
		this.list = ['张三', '李四', '王二麻子', '小茗同窗'];
	}
	render()
	{
		return (
			<View style={{flex:1}}>
				<Text>你好啊</Text>
				{this.list.map((item, idx) => <Text key={'idx_'+idx}>{item}</Text>)}
				<Image source={require('./image/logo.png')}/>
			</View>
		);
	}
}

再复杂一点的还能够层层嵌套,代码多了则能够把遍历的代码单独写到一个方法里面而后调用,好比:app

class TestComponent extends Component
{
	constructor(props)
	{
		super(props);
		this.list = ['张三', '李四', '王二麻子', '小茗同窗'];
	}
	renderList(list)
	{
		return list.map((item, idx) =>
		{
			return (<Text key={'idx_'+idx}>{item}</Text>);
		});
	}
	render()
	{
		return (
			<View style={{flex:1}}>
				<Text>你好啊</Text>
				{this.renderList(this.list)}
				<Image source={require('./image/logo.png')}/>
			</View>
		);
	}
}

样式篇

样式的写法

样式能够直接写在style上面:

<Text style={{color: 'red', fontSize: 16}} />

也能够像css同样先单独定义好再引用,不过和css仍是有很大差异的:

var styles = StyleSheet.create({
  btn: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#222222',
  },
  active: {
    borderWidth: 2,
    borderColor: '#00ff00',
  }
});

而后这样写:

<Text style={styles.btn} /> // 单个class
<Text style={[styles.btn, styles.active]} /> // 多个class
<Text style={[styles.btn, {color: 'red'}]} /> // class与style混写

注意事项:

  • 样式写法采用的是JSON格式;
  • 字符串属性必须加引号;
  • 大小所有没有px,纯数字;
  • 采用驼峰式命名,不是中划线;

直接操做某个元素

可使用ref给元素实现相似HTML中的id的效果,即this.refs[id]document.getElementById(id)相似:

render()
{
	return (
		<View ref="btn" style={{width: 100, height: 100}}/>
	);
}
componentDidMount()
{
	// 组件显示完毕给它设置红色边框效果
	this.refs['btn'].setNativeProps
	({
		style: {borderColor: 'red', borderWidth: 5}
	});
}

固然,通常推荐使用state来修改界面,除非你对性能特别关注才用上述方法。

已知setNativeProps没法修改Imagesource,这应该是个bug。

图片加载

加载本地图片

官网推荐使用require加载图片,路径就是相对于js的相对路径,这种方式能够自动设置宽高度:

<Image source={require('./images/check.png')} />

虽然这种方式有不少优势,可是带来了一个致命的缺点:就是图片路径没法动态指定,好比下面这个例子,若是有100种状态须要判断,难道要写100个if else

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

// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

目前尚未找到这个问题的有效解决方法。

加载app资源图片

加载已经打包到App中的图片资源(经过Xcode的asset类目或者Android的drawable文件夹打包):

假设有这样一个文件:android\app\src\main\res\drawable-hdpi\ic_launcher.png,那么加载时能够直接这样,注意不须要.png后缀,并且必须手动指定宽高度,不然默认是0*0

<Image source={{uri: 'ic_launcher'}} style={{width: 40, height: 40}} />

加载网络图片

加载网络图片和加载资源图片同样,也要手动指定宽高度:

<Image source={{uri: 'http://test.liuxianan.com/sample.jpg'}} style={{width: 40, height: 40}} />

组件的生命周期

W740xH900

附录:全部可用CSS列表

注意:部分属性安卓不支持,如shadow

RN中全部可用的CSS列表以下:

"alignItems", "alignSelf", "backfaceVisibility", "backgroundColor", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "borderWidth", "bottom", "color", "flex", "flexDirection", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "height", "justifyContent", "left", "letterSpacing", "lineHeight", "margin", "marginBottom", "marginHorizontal", "marginLeft", "marginRight", "marginTop", "marginVertical", "opacity", "overflow", "padding", "paddingBottom", "paddingHorizontal", "paddingLeft", "paddingRight", "paddingTop", "paddingVertical", "position", "resizeMode", "right", "rotation", "scaleX", "scaleY", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "textAlign", "textDecorationColor", "textDecorationLine", "textDecorationStyle", "tintColor", "top", "transform", "transformMatrix", "translateX", "translateY", "width", "writingDirection"

参考

http://blog.csdn.net/sbsujjbcy/article/details/50017029