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

Posted 2022-03-09 ljt2724960661

         项目中已经开始使用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。