react-native 详解

1.获取主屏幕尺寸

// 导入类库

var Dimensions = require('Dimensions');

// 样式

const styles = StyleSheet.create({
    container: {
        backgroundColor:'blue',
        height:Dimensions.get('window').height,
        width:Dimensions.get('window').width
    },
});

2.Image 图片

{/* 设置尺寸的情况下 */}

<Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>

 

{/* uri是固定写法，后面跟上图片网络URL地址的字符串即可，还有，网络图片必须设置图片的大小，否则无法显示，一般还需要配合填充方式以达到想要的效果 */}

<Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>

3.TextInput 文本输入框

4.View 中的触摸属性 onPress

Touchable --> TouchableHighlight(高亮触摸) TouchableOpacity(不透明触摸)

5. // 用于设置一些值固定不变或上下界面值传递

getDefaultProps(){
    return{
        number1: 1,
        number2: 2
    }
},

// 用于设置一些可变或者用来刷新界面

getInitialState(){
    return{
        sum:0
    }
},

6.

componentWillMount：		相当于OC中的 ViewWillAppear 方法,在组件简要被加载到视图之前调用，没有太多的功能

render：					它是每个组件必需具备的方法，本质上是个函数，并且返回JSX或者其他组件来构成DOM，和Android的XML布局类似

componentDidMount：			在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作

componentWillReceiveProps：	指父元素对组件的props或state进行了修改

shouldComponentUpadate：	一般用于优化，可以返回false或true来控制是否进行渲染

componentWillUpdate：		组件刷新前调用，类似componentWillMount

componentDidUpdate：		更新后的hook

7.{/* 实例化ScrollView */}

<ScrollView
	style={styles.scrollViewStyle}
	horizontal={true} // 水平方向
	showsHorizontalScrollIndicator={false} // 隐藏水平指示器
	showsVerticalScrollIndicator={false} // 隐藏垂直指示器
	pagingEnabled={true} // 开启分页功能
	>
		{/* 实例化内部子视图 */}
		{this.renderItem()}
</ScrollView>

8.ListView组件

步骤一：创建一个ListView.DataSource数据源，然后给它传递一个普通的数组数据

getInitialState(){
    // 初始化数据源(rowHasChanged是优化的一种手段，只有当r1 !== r2的时候才会重新渲染)
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return{
        // 给dataSource传递一组 数组
        dataSource: ds.cloneWithRows(['内容0', '内容1', '内容2', '内容3', '内容4', '内容5'])
    }
},

步骤二：使用数据源实例化一个ListView组件，定义一个renderRow回调函数，这个函数会接受数组中的每个数据作为参数，并返回一个可渲染的组件（也就是该列表的每一行Item）

render() {
    return (
        <View style={styles.container}>
            // 根据数据源实例化一个ListView
            <ListView
                style={{backgroundColor:'yellow'}}
                // 获取数据源
                dataSource={this.state.dataSource}
                // 根据数据源创建一个Item
                // 注：这里的this.renderRow是隐式写法，系统会根据函数的需要，将对应的参数传递过去（共有4个参数：rowData, sectionID, rowID, highlightRow）
                renderRow={this.renderRow}
            />
        </View>
    );
}, 

// 返回一个Item

renderRow(rowData,sectionID,rowID) {
    return(
        // 实例化Item
        <View>
            <Text style={{backgroundColor:'red', height:44}}>内容{rowData},在第{sectionID}组第{rowID}行</Text>
        </View>
    )
}

9.NavigatorIOS

10.Navigator 属性

11.View

12.Text

13.fetch

fetch(url, init)
.then((response) => { // 数据解析方式

})
.then((responseData) => { // 获取到的数据处理

})
.catch((error) => { // 错误处理

})
.done();

.