React-Native笔记--react-native-router-flux

         项目中已经开始使用react-native-router-flux，这个库比较大，内容也比较丰富，它是react-navigation的增强版，添加了如modal,refresh等功能，使用的过程中一点点总结下来，方便以后再用，

使用前: npm i react-native-router-flux --save 或

yarn add react-native-router-flux

注意:react-native link

 小栗子:

Main.js

import React, {Component} from 'react'
import {Router, Stack, Scene} from 'react-native-router-flux'

import App from './App.js';
import MovieList from './components/movie/MovieList.js'
import MovieDetail from './components/movie/MovieDetail.js'

export default class Main extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	
	render() {
		return 
    
      
      
      
    
  
	}
}

MovieList.js

 

import React, {Component} from 'react';
import {
	View,
	Text,
	Image,
	ActivityIndicator,
	FlatList,
	StyleSheet,
	TouchableHighlight
} from 'react-native';

import {Actions} from "react-native-router-flux";

export default class MovieList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			movies: [],
			currentPage: 1,
			pageSize: 12,
			isLoading: true,
			totalPage: 0
		};
	}
	
	componentWillMount() {
		this.getDataByPage();
	}
	
	render() {
		return 
			{this.renderList()}
		
	}
	
	/*自定义的方法*/
	getDataByPage = () => {
		let start = (this.state.currentPage - 1) * this.state.pageSize;
		fetch(`https://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${start}&count=${this.state.pageSize}`).then(res => res.json()).then(data => {
			this.setState({
				isLoading: false,
				movies: this.state.movies.concat(data.subjects),
				totalPage: Math.ceil(data.total / this.state.pageSize)
			})
		})
	};
	
	getDataByPage1 = () => {
		let data = require('./test_list.json');
		setTimeout(() => {
			this.setState({
				isLoading: false,
				movies: data.subjects,
				total: data.total
			})
		}, 300)
	};
	
	getSeparator = () => {
		return 
	};
	
	getNextPage = () => {
		if ((this.state.currentPage + 1) > this.state.totalPage) return;
		this.setState({
			currentPage: this.state.currentPage + 1
		}, () => this.getDataByPage())
	};
	
	renderList = () => {
		if (this.state.isLoading) {
			return 
		} else {
			return  i}
					renderItem={({item}) => this.renderItem(item)}
					ItemSeparatorComponent={this.getSeparator}
					onEndReachedThreshold={0.5}
					onEndReached={this.getNextPage}
			/>
		}
	};
	
	toMovieDetail = (id) => {
		Actions.moviedetail({id});
	};
	
	renderItem = (item) => {
		return  this.toMovieDetail(item.id)}>
			
				
				
					电影名称：{item.title}
					电影类型：{item.genres.join(' ')}
					制作年份：{item.year}年
					豆瓣评分：{item.rating.average}
				
			
		
	}
}

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		padding: 20,
	},
	image: {
		width: 100,
		height: 140
	},
	infos: {
		justifyContent: 'space-around',
		paddingLeft: 30
	}
});

 

MovieDetail.js

import React, {Component} from 'react';
import {
	View,
	Text,
	Image,
	ScrollView,
	ActivityIndicator
} from 'react-native';

export default class MovieList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			movie: [],
			isLoading: true
		};
	}
	
	componentWillMount() {
		this.getDataById(this.props.id);
	}
	
	render() {
		return 
			{this.renderDetail()}
		
	}
	
	/*自定义的方法*/
	renderDetail = () => {
		if (this.state.isLoading) {
			return 
		} else {
			return 
				
					{this.state.movie.title}
					
						
					
					{this.state.movie.summary}
				
			
		}
	};
	getDataById = (id) => {
		fetch(`https://api.douban.com/v2/movie/subject/${id}?apikey=0df993c66c0c636e29ecbb5344252a4a`).then(res => res.json()).then(data => {
			this.setState({
				movie: data,
				isLoading: false
			});
		})
	};
	getDataById1 = () => {
		const data = require('./test_detail.json');
		setTimeout(() => {
			this.setState({
				movie: data,
				isLoading: false
			});
		}, 300)
	};
}

比较重要的API:

Actions:

主要提供导航功能;

[key]        Function    Object    Actions将'自动'使用路由器中的场景key进行导航。如果需要跳转页面，可以直接使用Actions.key()或Actions[key].call()。
currentScene    String         返回当前活动的场景。
jump          Function    (sceneKey: String, props: Object)    用于切换到新选项卡。如Actions.jump('string');
pop           Function         回到上一个页面。
popTo         Function    (sceneKey: String, props: Object)    返回到指定的页面。
push          Function    (sceneKey: String, props: Object)    跳转到新页面。
refresh       Function    (props: Object)    从堆栈中弹出当前场景，并将新场景推送到导航堆栈。没有过度动画。
replace       Function    (sceneKey: String, props: Object)    替换当前场景，没有动画。
reset         Function          (sceneKey: String, props: Object)    清除路由堆栈并将场景推入第一个索引. 没有过渡动画。
drawerOpen     Function         如果可用，打开Drawer。
drawerClose    Function         如果可用，关闭Drawer。