React Native 学习三

发布时间：2020-12-15 06:49:06 所属栏目：百科来源：网络整理

导读：接着上篇文章继续开发 http://blog.csdn.net/kangguang/article/details/78011476 1.总体上了三个视图组件：搜索、轮播、商品列表 2.回调事件只进行了弹出提醒处理。就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'
}
])

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 i react-native-deprecated-custom-component

重新运行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会刷新界面

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!