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 <Router sceneStyle={{backgroundColor: "#fff"}}>
    <Stack key="root">
      <Scene key="app" component={App} title="" hideNavBar={true}/>
      <Scene key="movielist" component={MovieList} title="热映电影列表"/>
      <Scene key="moviedetail" component={MovieDetail} title="电影详情"/>
    </Stack>
  </Router>
	}
}

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 <View>
			{this.renderList()}
		</View>
	}
	
	/*自定义的方法*/
	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 <View style={{
			borderTopWidth: 1,
			borderTopColor: '#666',
			marginLeft: 20,
			marginRight: 20,
		}}></View>
	};
	
	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 <ActivityIndicator size="large"></ActivityIndicator>
		} else {
			return <FlatList
					data={this.state.movies}
					keyExtractor={(item, i) => i}
					renderItem={({item}) => this.renderItem(item)}
					ItemSeparatorComponent={this.getSeparator}
					onEndReachedThreshold={0.5}
					onEndReached={this.getNextPage}
			/>
		}
	};
	
	toMovieDetail = (id) => {
		Actions.moviedetail({id});
	};
	
	renderItem = (item) => {
		return <TouchableHighlight underlayColor="white" onPress={ () => this.toMovieDetail(item.id)}>
			<View key={item.id} style={styles.container}>
				<Image source={{uri: item.images.small}} style={styles.image}></Image>
				<View style={styles.infos}>
					<Text>电影名称：{item.title}</Text>
					<Text>电影类型：{item.genres.join(' ')}</Text>
					<Text>制作年份：{item.year}年</Text>
					<Text>豆瓣评分：{item.rating.average}</Text>
				</View>
			</View>
		</TouchableHighlight>
	}
}

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 <View>
			{this.renderDetail()}
		</View>
	}
	
	/*自定义的方法*/
	renderDetail = () => {
		if (this.state.isLoading) {
			return <ActivityIndicator size="large"></ActivityIndicator>
		} else {
			return <ScrollView>
				<View>
					<Text style={{fontSize: 25, textAlign: 'center', padding: 20}}>{this.state.movie.title}</Text>
					<View style={{alignItems: 'center'}}>
						<Image source={{uri: this.state.movie.images.large}} style={{width: 200, height: 280}}></Image>
					</View>
					<Text style={{fontSize: 16, lineHeight: 50, padding: 10}}>{this.state.movie.summary}</Text>
				</View>
			</ScrollView>
		}
	};
	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。