react-native 常用组件的用法(二) ScrollView组件 ListView组件 Navigator组件 TableBarIOS组件 网络请求
能够调用移动平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。
注意一定要给scrollview一个高度，或者是他父级的高度。
常用方法
onScrollBeginDrag:开始拖拽的时候;
onScrollEndDrag：结束拖拽的时候;
onMomentumScrollBegin：开始滑动;
onMomentumScrollEnd：开始滑动;
特殊组件
RefreshControl 以用在ScrollView或ListView内部，为其添加下拉刷新的功能。
当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。
示例
创建一个scroll.js文件
代码如下：
import React, { Component } from 'react';
import {
StyleSheet,
View,
ScrollView,
RefreshControl
} from 'react-native';
var dataSource = require("./data.json");
// 创建组件
var ScrollTest = React.createClass({
// 下面的几种函数可以根据自己的需求添加
_onScrollBeginDrag () {
// 这里是开始拖拽的函数
},
_onScrollEndDrag () {
// 这里是拖拽结束的函数
},
_onMomentumScrollBegin () {
// 这里是开始滚动的函数
},
_onMomentumScrollEnd () {
// 这里是滚动结束的函数
},
_refresh () {
// 这里是请求数据的函数
alert("正在请求数据");
},
render () {
return (
<ScrollView style={styles.container}
onScrollBeginDrag={this._onScrollBeginDrag}
onScrollEndDrag={this._onScrollEndDrag}
onMomentumScrollBegin={this._onMomentumScrollBegin}
onMomentumScrollEnd={this._onMomentumScrollEnd}
refreshControl={
<RefreshControl refreshing={false}
titleColor={"red"}
title={"正在刷新......."}
tintColor={"cyan"}
onRefresh={this._refresh} />
}>
<View style={[styles.item, styles.item1]}></View>
<View style={[styles.item, styles.item2]}></View>
<View style={[styles.item, styles.item3]}></View>
</ScrollView>
)
}
});
// 实例化样式
var styles = StyleSheet.create({
container: {
marginTop: 25,
height: 300,
borderWidth: 1,
borderColor: "#ccc"
},
item: {
280,
height: 150,
margin: 20
},
item1: {
backgroundColor: "red"
},
item2: {
backgroundColor: "green"
},
item3: {
backgroundColor: "yellow"
}
});
module.exports = ScrollTest;
再将index.ios.js文件改成如下：
import React, { Component } from 'react';
import {
AppRegistry,
View,
} from 'react-native';
var Scroll = require("./scroll");
var ScrollTest = React.createClass({
render () {
return (
<View>
<Scroll></Scroll>
</View>
)
}
});
AppRegistry.registerComponent('useComponent', () => ScrollTest);
最终效果：
ListView组件
用于高效地显示一个可以垂直滚动的变化的数据列表。
最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）。
数据处理
ListView.DataSource为ListView组件提供高性能的数据处理和访问。
我们需要调用方法从原始输入数据中抽取数据来创建ListViewDataSource对象，并用其进行数据变更的比较。
DataSource初始化：
getInitialState:function () {
// 实例化DataSource对象
var ds = new ListView.DataSource({
rowHasChanged:(oldData,newData) => oldData !== newData
});
return {
data:ds.cloneWithRows(news)
}
}
常用属性
设置数据源：dataSource={this.state.dataSource}
设置列表组件：renderRow={this._renderRow}
设置ListView头部：renderHeader={this._renderHeader}
设置列表项之间的间隔：renderSeparator={this._renderSeparator}
示例 制作一个电影列表
博主先前从猫眼电影里获取了一些电影介绍的json文件，有兴趣的同学可以去猫眼电影列表获取一些信息，注意这里需要json格式转换一下！
这里创建一个movieList.js的文件
代码如下：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ListView
} from 'react-native';
// 通过ListView实现电影列表
var movies = require("./data.json").data.movies;
// 创建组件
var ListMovie = React.createClass({
getInitialState () {
var ds = new ListView.DataSource({
rowHasChanged: (oldData, newData) => oldData !== newData
});
return {dataSource: ds.cloneWithRows(movies)}
},
_renderRow (movie) {
return (
<View style={styles.row}>
<Image style={styles.img} source={{uri: movie.img}}/>
<View style={styles.right}>
<Text style={styles.name}>{movie.nm}</Text>
<Text style={styles.dir}>导演：{movie.dir}</Text>
<Text style={styles.dir}>上映时间：{movie.rt}</Text>
</View>
</View>
)
},
_renderHeader () {
return (
<View style={styles.header}>
<Text style={styles.title}>猫眼热门电影</Text>
<View style={[styles.separator, { "100%"}]}></View>
</View>
)
},
_renderSeparator () {
return <View style={styles.separator}></View>
},
render () {
return <ListView style={styles.container}
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
renderSeparator={this._renderSeparator}
/>
}
});
// 实例化样式
var styles = StyleSheet.create({
container: {
marginTop: 25
},
row: {
flexDirection: "row",
alignItems: "center",
padding: 10
},
img: {
78,
height: 128
},
right: {
marginLeft: 15,
flex: 1
},
name: {
fontSize: 20,
fontWeight: "bold",
marginTop: 3,
marginBottom: 10
},
dir: {
fontSize: 15,
marginBottom: 3,
color: "#686868"
},
header: {
height: 44,
alignItems: "center"
},
title: {
fontSize: 25,
fontWeight: "bold",
lineHeight: 44
},
separator: {
height: 1,
backgroundColor: "#ccc"
}
});
module.exports = ListMovie;
再将index.ios.js文件改成如下：
import React, { Component } from 'react';
import {
AppRegistry,
View,
} from 'react-native';
var ListMovie = require("./listMovie");
var Movie = React.createClass({
render () {
return (
<View>
<ListMovie></ListMovie>
</View>
)
}
});
AppRegistry.registerComponent('useComponent', () => Movie);
最终效果：
Navigator组件
使用导航器可以让你在应用的不同场景（页面）间进行切换。其实质上类似于HTML里导航条功能。
不过导航器页面的跳转需要通过路由对象来分辨不同的场景。
利用renderScene方法，导航栏可以根据指定的路由来渲染场景。
导航器的设置步骤
第一步：设置属性initialRoute：初始化route对象，指定默认页面，也就是启动app之后所看到的第一个页面；
第二步：configureScene：配置场景动画和手势；
第三步：renderScene；渲染场景，参数route（第一步创建并设置的导航器路由对象），navigator（导航器对象）
代码展示：
<Navigator
initialRoute={rootRoute}
configureScene={(route)=>Navigator.SceneConfigs.PushFromRight}
renderScene={
(route,navigator)=>{
var MySceneComponent = route.component;
console.log(MySceneComponent);
console.log(“aaaa”);
return (
<MySceneComponent route={route} navigator={navigator}/>
)
}
}
/>
示例
创建一个nav.js文件
代码如下：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
TextInput
} from 'react-native';
// 在进行导航时，需要先构成一些页面，使用Navigator
// 创建组件
var FirstPage = React.createClass({
getInitialState () {
return {text: ""}
},
saveText (text) {
this.setState({text: text})
},
changePage () {
// 把需要传递的值，都放在路由的nextPass属性里
var nextRoute = {
component: SecondPage,
nextPass: {text: this.state.text}
};
this.props.navigator.push(nextRoute);
},
render () {
return (
<View style={[styles.container, {backgroundColor: "cyan"}]}>
<TextInput style={styles.input} placeholder={"请输入"} onChangeText={this.saveText}/>
<TouchableOpacity onPress={this.changePage} style={styles.btn}>
<Text style={styles.btnText}>跳转到下一页</Text>
</TouchableOpacity>
</View>
)
}
});
var SecondPage = React.createClass({
changePage () {
this.props.navigator.pop();
},
render () {
return (
<View style={[styles.container, {backgroundColor: "yellowgreen"}]}>
<Text>接收到的数据是{this.props.text}</Text>
<TouchableOpacity onPress={this.changePage} style={styles.btn}>
<Text style={styles.btnText}>返回上一页</Text>
</TouchableOpacity>
</View>
)
}
});
var Nav = React.createClass({
render () {
// 初始路由，首页
var rootRoute = {
component: FirstPage,
nextPass: {}
};
return (
<Navigator
// 第一步需要进行初始路由的设置
initialRoute={rootRoute}
// 第二步设置页面的切换方式
configureScene={(route) => Navigator.SceneConfigs.FloatFromBottom}
// 第三部确定要渲染的场景(页面)
renderScene={(route, navigator) => {
// 找到要渲染的页面
var Component = route.component;
// 渲染时，需要把route和Navigator作为属性传递下去，传递的值也作为属性传递
// ...route.nextPass把route中的nextPass里的数据都传递下去
return <Component {...route.nextPass} text={route.nextPass.text} route={route} navigator={navigator} />
}}
/>
)
}
});
// 实例化样式
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
btn: {
backgroundColor: "#25f30d",
115,
height: 30,
borderRadius: 5,
justifyContent: "center",
alignItems: "center"
},
btnText: {
fontSize: 14,
fontWeight: "bold"
},
input: {
margin: 30,
borderWidth: 1,
borderColor: "#ccc",
height: 30,
backgroundColor: "#77ccb1"
}
});
module.exports = Nav;
在index.ios.js文件中代码更改如下：
import React, { Component } from 'react';
import {
AppRegistry,
View,
} from 'react-native';
var Nav = require("./nav");
var NavTest = React.createClass({
render () {
return (
<View style={{flex: 1}}>
<Nav></Nav>
</View>
)
}
});
AppRegistry.registerComponent('useComponent', () => NavTest);
最终效果：
TableBarIOS组件
TableBar是放置在屏幕的最下方会有很多平级的标签图标的标签栏，用户可以击内部不同的图标切换屏幕中显示的视图，TableBarIOS只适用于IOS平台
常用属性
barTintColor：标签栏的背景颜色
tintColor:当前被选中标签图标的颜色
unselectedItemTintColor：当前没有被选中的标签图标的颜色
TabBarIOS.Item
TabBarIOS.Item是每个可以点击标签不图标，根据点击的不同显示不同的视图
常用属性
title：在图标下面显示的标题文字
icon：给当前标签指定一个自定义的图标
onPress：当此标签被选中时调用。你应该修改组件的状态来使得selected={true}
selected：这个属性决定了子视图是否可见。如果你看到一个空白的页面，很可能是没有选中任何一个标签。
代码展示：
<TabBarIOS.Item
title=“movieTest”
icon={require(“./passport.png”)}
onPress={this.changeTab.bind(this, ”movieTest”)}
selected={this.state.selectTab == “movieTest”}
>
<MovieList></MovieList>
</TabBarIOS.Item>
示例
创建一个tabBar.js文件
代码如下：
import React, { Component } from 'react';
import {
TabBarIOS
} from 'react-native';
//引入三个选项页面（这里引入的是之前做好的几个组件）
var Nav = require("./nav");
var MovieList = require("./movieList");
var ImageTest = require("./image");
var TabBarTest = React.createClass({
getInitialState:function () {
//显示当前显示的标签
return {
selectTab: "首页"
}
},
changeTab:function (name) {
this.setState({
selectTab:name
})
},
render:function () {
return (
<TabBarIOS barTintColor="#ccc"
tintColor={"red"}
unselectedItemTintColor={"cyan"}
>
{/*下部的标签栏*/}
<TabBarIOS.Item
title="首页"
icon={require("./images/index.png")}
onPress={this.changeTab.bind(this,"首页")}
selected={this.state.selectTab == "首页"}
>
{/*每一个选项*/}
<Input/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="图片"
icon={require("./images/picture.png")}
onPress={this.changeTab.bind(this,"图片")}
selected={this.state.selectTab == "图片"}
>
{/*每一个选项*/}
<ImageTest/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="电影"
icon={require("./images/movie.png")}
onPress={this.changeTab.bind(this,"电影")}
selected={this.state.selectTab == "电影"}
>
{/*每一个选项*/}
<MovieList/>
</TabBarIOS.Item>
</TabBarIOS>
)
}
});
module.exports = TabBarTest;
在index.ios.js文件中，代码更改为如下：
import React, { Component } from 'react';
import {
AppRegistry,
View,
} from 'react-native';
var TabBarTest = require("./tabBar");
var TabTest = React.createClass({
render () {
return (
<View style={{flex: 1}}>
<TabBarTest></TabBarTest>
</View>
)
}
});
AppRegistry.registerComponent('useComponent', () => TabTest);
最终效果：
网络请求
React Native提供了和web标准一致的Fetch API，用于满足开发者访问网络的需求。与之前学过的AJAX很相似。
fetch()第一个参数为请求地址
fetch(‘https://mywebsite.com/mydata.json’);
第二个参数可选，可以用来定制HTTP请求一些参数
fetch(‘https://mywebsite.com/endpoint/‘, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
firstParam: ‘yourValue’,
secondParam: ‘yourOtherValue’,
})
})
其中body表示要传输的数据
Fetch 方法会返回一个Promise，需要对返回的数据进行处理
通过链式结构添加then方法进行成功数据处理
如果有错，通过catch方式捕捉
getDate:function () {
fetch(url)
.then((res)=>{
return res.json();
})
.then((resData)=>{
this.setState({
loaded:true,
dataSource:this.state.dataSource.cloneWithRows(resData.data.movies)
})
})
.catch((err)=>{
alert(err)
})
}
.