又是被版本折磨的一天
今天学习了两个RN页面的跳转，废话不多说，上步骤
1.安装react-native-router-flux
这里我的react native版本为0.55.4，react版本为16.3.1。又是出现一堆版本问题的错误，最后安装了3.45.0的版本
npm install --save react-native-router-flux@3.45.0
安装成功后，链接一下原生库
react-native link
2.修改index.js入口文件
import React from 'react';
import {AppRegistry,StyleSheet,View,Text,Image,ListView} from 'react-native';
import { Button,Toast} from '@ant-design/react-native';
import { Router, Scene } from 'react-native-router-flux';
import ListScreen from "./RnDemo/list";
import DetailsScreen from "./RnDemo/detail";
export default class App extends React.Component{
render(){
return(
<Router>
<Scene key="root">
<Scene key="list"
component={ListScreen}
initial
hideNavBar={true}
/>
<Scene key="detail"
component={DetailsScreen}
hideNavBar={true}
/>
</Scene>
</Router>
)
}
}
AppRegistry.registerComponent('AndroidRnDemoApp',()=>App)
首先引入页面，import ListScreen from "./RnDemo/list";这里的路径改为你自己的就可以。
之后最重要的就是<Scene>标签，这里的key约定为root，root 下的标签就是我们实际要显示的内容了。
这里注意，key得是唯一的。相当于给这个页面一个名称。当我们需要跳转到某个页面的时候就可以直接调用Actions.key();
其中的hideNavBar={true}可以隐藏导航栏标题
3.创建要跳转的页面
这里我是从景点列表页跳转到详情页，我为了以后看方便，在项目根目录下创建了文件夹，在文件夹中分别创建了list.js和detail.js
list.js内容
import React from 'react';
import {AppRegistry,StyleSheet,View,Text,Image,ListView, TouchableOpacity} from 'react-native';
import { Button,Toast} from '@ant-design/react-native';
import { Actions } from 'react-native-router-flux';
class list extends React.Component {
constructor(props){
super(props);
//创建ListViewDataSource对象
const scenic = new ListView.DataSource({
rowHasChanged:(row1,row2) =>row1!=row2 // rowHasChanged(prevRowData, nextRowData); 用其进行数据变更的比较
})
this.state={
scenic,
datas:[],
hasMore:true,
refreshing:true,
isLoading:true,
dataArr:[]
}
// 在ES6中，如果在自定义的函数里使用了this关键字，则需要对其进行“绑定”操作，否则this的指向会变为空
// 像下面这行代码一样，在constructor中使用bind是其中一种做法（还有一些其他做法，如使用箭头函数等）
this.fetchData = this.fetchData.bind(this);
}
componentDidMount(){
this.fetchData();
}
fetchData(ref=false){
var options={
method:'GET'
}
fetch("http://192.168.10.48:8089/footmark/api/scenic/getScenicList",options)
.then((response)=>response.json())
.then((responseData)=>{
const len = responseData.data.length
if(len<=0){
this.setState({
refreshing:false,
isLoading:false,
hasMore:false
})
Toast.fail("暂无数据",1)
return false
}
if(ref){
//这里表示刷新使用
// 下拉刷新的情况，重新添加数据即可(这里等于只直接用了第一页的数据)
this.setState({
scenic:this.state.scenic.cloneWithRows(responseData.data),// 数据源中的数据本身是不可修改的,要更新datasource中的数据，请（每次都重新）调用cloneWithRows方法
hasMore:true, //下拉刷新后，重新允许下拉加载
refreshing:false, //是否在刷新数据
isLoading:false,//是否加载中
dataArr:responseData.data//保存数据进state，下拉加载时需要使用已有数据
})
}else{
//上拉加载
//合并state中已有数据和新增数据
var dataArr = this.state.dataArr.concat(responseData.data)
this.setState({
scenic:this.state.scenic.cloneWithRows(dataArr),
refreshing:false,
isLoading:false,
dataArr:dataArr
})
}
});
}
//下拉刷新
onRefresh = ()=>{
this.setState({
refreshing:true,
isLoading:true,
},()=>{
this.fetchData(true)
})
}
//加载更多
onEndReached = (event) =>{
if(this.state.isLoading || !this.state.hasMore){
return
}
this.setState({
isLoading:true
},()=>{
this.fetchData(false)
})
}
render() {
const row = (rowData,sectionID,rowID)=>{
// 这里rowData,就是上面方法cloneWithRows的数组遍历的单条数据了，直接用就行
const url = rowData.scenicFimage
const id = rowData.sid
return(
<View style={styles.scenic}>
<View style={styles.scenicPic}>
<TouchableOpacity onPress={()=>{Actions.detail({id})}}>
<Image style={{width:150,height:100}} source={{uri:url}}></Image>
</TouchableOpacity>
</View>
<View style={styles.scenicContent}>
<Text style={styles.name}>{rowData.scenicName}</Text>
<Text style={styles.intro}>{rowData.scenicSummary}</Text>
</View>
</View>
);
}
return (
<View style={styles.container}>
<View style={styles.titleBar}>
<Image style={{width:50,height:50}} source={{uri:'back'}} />
<Text style={styles.title}>景区列表</Text>
<Button style={styles.add} type="primary">添加</Button>
</View>
<ListView
ref = {el=>this.lv=el}
dataSource = {this.state.scenic}
renderRow={row}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection:'column'
},
titleBar:{
flexDirection:'row',
justifyContent:'space-between',
backgroundColor:'red',
padding:10
},
title:{
fontSize:18,
fontWeight:'bold',
color:'#000000',
justifyContent:'center',
margin:10
},
scenic:{
flexDirection:'row',
justifyContent:'space-between',
margin:5,
height:100
},
scenicContent:{
flexDirection:'column',
margin:3,
height:100
},
name:{
fontWeight:'bold',
fontSize:16,
color:'black',
margin:5
},
intro:{
fontSize:14,
color:'blue'
}
});
export default list;
list.js我将所有代码都贴上了，其中涉及到的跳转如下
<TouchableOpacity onPress={()=>{Actions.detail({id})}}>
<Image style={{width:150,height:100}} source={{uri:url}}></Image>
</TouchableOpacity>
这里简单介绍下TouchableOpacity ，它是react native提供的点击事件之一，你可以将它当成一个特殊的UI组件， 将这个特殊的UI组件包在UI组件的外面，就可以使指定的UI组件有了点击响应能力。
其中onPress为按钮按下事件，相当于onclick事件。还有其中几种事件大家可以百度查看。
Actions.detail({id})，detail就是刚才在index.js中key值，id为要传递的参数。
这里如果不需要传参的话，直接Actions.key();就可以了。
那么如何在detail.js中接受参数呢？
直接this.props.id就可以，id为上一页传递参数的名称。记得写上构造方法。
import React from 'React';
import {AppRegistry,StyleSheet,View,Text,Image,ListView} from 'react-native';
import { Carousel } from '@ant-design/react-native';
class Detail extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<View style={styles.container}>
<Text>详情为{this.props.id}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flexDirection:'column'
}
})
export default Detail;
到此简单的页面跳转就可以了。
附上一个react-native-router-flux总结属性的转载文章：
https://blog.csdn.net/jiecsdn/article/details/59057026
