React Native 学习三
接着上篇文章继续开发 http://blog.csdn.net/kangguang/article/details/78011476
1.总体上了三个视图组件：搜索、轮播、商品列表
2.回调事件只进行了弹出提醒处理。
就React Native 开发来说，开发的一般流程如下图：
本次学习内容为：轮播加入加载本地图片显示、商品列表（数据内容展示、分割线、下载刷新、数据刷新）、页面跳转（场景切换）、数据传递等功能
1.轮播图片加载
this.state = {
currentPage:0,
isRefreshing:false,
searchText :'',
advertisements:[
{image:require('./image/banner.png')},
{image:require('./image/banner02.png')},
{image:require('./image/banner03.png')},
],
}
<View style={styles.advertisement}>
<ScrollView ref = "scrollView"
horizontal = {true}
showHorizontalScrollIndicator = {false}
pagingEnabled = {true}>
{this.state.advertisements.map((advertisement,index)=>{
return(
<TouchableHighlight key ={index} onPress = {
()=>Alert.alert('你点击了轮播图',null,null)
}>
<Image style = {styles.advertisement} source =
{advertisement.image}
>
</Image>
</TouchableHighlight>
);
})}
</ScrollView>
<View style={[styles.indicator,{left:left}]}>
{this.state.advertisements.map((advertisement,index)=>{
return(
<View key = {index}
style = {(index === this.state.currentPage)
?styles.circleSelected
:styles.circle
}/>
);
})}
</View>
</View>
2.商品列表
dataSource:ds.cloneWithRows(
[
{
image:require('./image/rt_0.png'),
title:'商品1',
subTitle:'描述1'
},
{
image:require('./image/rt_1.png'),
title:'商品2',
subTitle:'描述2'
},
{
image:require('./image/rt_2.png'),
title:'商品3',
subTitle:'描述3'
},
{
image:require('./image/rt_3.png'),
title:'商品4',
subTitle:'描述4'
},
{
image:require('./image/rt_4.png'),
title:'商品5',
subTitle:'描述5'
},
{
image:require('./image/rt_5.png'),
title:'商品6',
subTitle:'描述6'
},
{
image:require('./image/rt_7.png'),
title:'商品7',
subTitle:'描述7'
},
{
image:require('./image/rt_8.png'),
title:'商品9',
subTitle:'描述9'
},
{
image:require('./image/rt_9.png'),
title:'商品10',
subTitle:'描述10'
}
])
<View style={styles.products}>
<ListView dataSource = {this.state.dataSource}
renderRow = {this._renderRow}
renderSeparator={this._renderSeparator}
refreshControl = {this._renderRefreshControl()}//下拉刷新
>
</ListView>
</View>
3.下拉刷线
_renderRefreshControl()
{
return(
<RefreshControl
refreshing ={this.state.isRefreshing}
tintColor = {'#FF0000'}
title = {'正在刷新，请稍后。。。'}
onRefresh = {this._onRefresh}
titleColor={'#0000FF'} >
</RefreshControl>
);
}
_onRefresh =()=>
{
this.setState({isRefreshing:true});
setTimeout(()=>{
const products = Array.from(new Array(10)).map(
(value,index)=>(
{
image:require('./image/rt_0.png'),
title:'新商品'+index,
subTitle:'新商品描述'+index
}
)
);
this.setState({isRefreshing:false,dataSource:ds.cloneWithRows(products)});
},2000);
}
4.页面跳转
新建home.js
将app.js内容全部拷贝到home.js中，把class名改为home
修改app.js
在Xcode点击运行 这是报错
这是因为在0.4以后版本中 Navigator 组件从react-native移除了，而需要导入react-native-deprecated-custom-components这个包来使用 Navigator。于是就需要安装这个包并引入
解决办法：
通过npm安装相应的库
在项目根目录下输入npm install react-native-deprecated-custom-components
yarn add react-native-deprecated-custom-components
重新运行Xcode 这是编译错误，再次执行 npm install 后运行 正常显示。
5.数据传递
React Native 定义好的动画包括：
FloatFromRight
FloatFromLeft
FloatFromBottom
FloatFromBottomAndroid
FadeAndroid
HorizontalSwipeJump
HorizontalSwipeJumpFromRight
VerticalUpSwipeJump
VerticalDownSwipeJump
6 二级页面跳转
在使用this.props.navigator 获取Navigator 之后，可以使用Navigator 的如下接口进行场景的切换。
push(route):跳转到新的场景，并且将场景入栈。
pop:跳转到上一个场景，并且将当前场景出栈。
popToRoute(route):：pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景都会被卸载。
popToTop():pop到栈中的第一个场景，卸载其他的所有场景。
replace(route):用一个新的路由替代当前场景。
replaceAtIndex(route,index):替换指定序号的路由场景。
replacePrevious(route):替换上一个场景
其他方法：jumpBack（）、jumpForward（）、jumpTo（route）以及resetTo（route）等
7.实现页面间的数据传递
在React Native中有两种方式可以存储和传递数据，即props（属性）以及state（状态）其中：
props 通常是在父组件中指定的，而且一经指定，在被指定的组件的生命周期中则不再改变。
state 通常用于存储需要改变的数据，并且当state数据发生更新时，React Native会刷新界面
以上是 React Native 学习三 的全部内容， 来源链接： utcz.com/z/381795.html
