开发reactNative

最新推荐文章于 2024-08-09 07:28:51 发布

置顶 IT_大象

最新推荐文章于 2024-08-09 07:28:51 发布

阅读量346

点赞数

分类专栏：文档整理文章标签： react-native

本文链接：https://blog.csdn.net/it_elephant/article/details/89279053

版权

文档整理专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、开发准备

1、技术栈：

javascript
es5/es6  (ECMA 是规范 javascript 是实现)（es6规范涵盖es2015 es2016 ...）
框架：react (简单的方式创建网页与交互)
布局方式：Flexbox 弹性框布局规范
存储方式：AsyncStorage 
网络操作：Fetch
封装自己组建：Native Modules （Xcode）
原生学习：Android & ios

2、第三方库：

		复选框：@react-native-check-bix
		提示框：@react-native-easy-toast
		解决启动白屏： @react-native-splash-screen
		渲染带有样式的模板(html 渲染)：@react-native-htmlview  注：webview太大了
		标签切换：@react-native-scrollable-tab-view
		列表排序：@react-native-sortable-listview
		底部导航：@react-native-tab-navigator
		视差滚动@react-native-parallax-scroll-view
		分享sdk：友盟
		自定义NavigationBar （导航栏）
		自定义MoreMenu (可配置更多菜单)
		自定义启动屏 
		自定义复选框
		自定义提示框

3、高层封装（Native模块封装）：

		BaseCommom 封装
		网络操作封装
		数据库操作封装
		数据解析封装
		promise封装
		其他工具封装

2、项目结构

1、react-native项目结构

分为 js 部分和 native 部分 
native 又分为 android 部分 和 ios部分
结构
	index.ios.js   //入口
	index.android.js   //入口
	android    //android native 项目 源码
	ios           //ios native 项目  源码
	res          //全局资源（图片，音频视频等）
	doc         //文档说明
	js 
		common  //可复用组件
		expand	//扩展
		page		//完整页面
		config		//配置项（常量、接口地址、路由、多语言化等预置数据）
		util			//工具类（非ui组件ß）

3、底部导航开发（1）

## 1、全局配置 npm 淘宝镜像
	终端输入：  open .npmrc  打开 .npmrc	
			如果没有找到文件先执行
			npm config set registry https://registry.npm.taobao.org
			在执行 open .npmrc
## 2 本地项目目录与github关联，方便代码管理
		
## 3 初始化项目
	1、react-native init iyd_gp  //新建一个iyd_gp的项目
	2、npm install react-native-tab-navigator --save 安装底部导航组件
	3、将组件代码引入到app.js 页面 并把代码块引入
	4、启动项目 react-native run-ios
	5、com + d 设置ios loader 热加载

4、react-Navigation 的基本使用及页面间数据传递（路由功能）

1、需要查看文档，因为更新比较快（注意配置）
	文档：https://reactnavigation.org/docs/zh-Hans/getting-started.html
	yarn add react-navigation
	yarn add react-native-gesture-handler
	react-native link react-native-gesture-handler
2、目录结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190414140050659.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX0VsZXBoYW50,size_16,color_FFFFFF,t_70)

3、app.js  启动页
	import { createStackNavigator, createAppContainer } from "react-navigation"; 
	import {AppStackNavigator} from './navigators/AppNavigators';
	export default createAppContainer(AppStackNavigator);

4、AppNavigators.js 路由页
	import React from "react"; 
	import { View, Text, Button} from "react-native"; 
	import { createStackNavigator, createBottomTabNavigator} from "react-navigation"; 
	import HomePage from '../pages/HomePage'
	import Page1 from '../pages/Page1'
	import Page2 from '../pages/Page2'
	import Page3 from '../pages/Page3'
	export const AppStackNavigator = createStackNavigator({
	    HomePage:{
	        screen:HomePage,
	        // navigationOptions:{
	        //     title:"首页",
	        //     // header:null
	        // }
	    },
	    Page1:{
	        screen:Page1,
	        navigationOptions:({navigation})=>({
	            title:`${navigation.state.params.name}Page1`,
	        })
	    },
	    Page2:{
	        screen:Page2
	    },
	    Page3:{
	        screen:Page3,
	        navigationOptions:(props) => {
	            const {navigation} = props;
	            const {state,setParams} = navigation;
	            const {params} = state;
	            return{
	                title : params.title ? params.title : "page3",
	                headerRight:(
	                    <Button 
	                        title={params.mode === 'edit' ? "保存" : "编辑"}
	                        onPress={() => {
	                            setParams({mode:params.mode === "edit" ? "" : "edit"})
	                        }}
	                    />
	                )
	            }
	        }
	    }
	});

4、HomePage.js 首页 //createStackNavigator开发
	import React from 'react';
	import { Button, View, Text } from 'react-native';
	import { createStackNavigator, createAppContainer } from 'react-navigation';
	
	export default class HomeScreen extends React.Component {
	  static navigationOptions = {
	    title:"首页",
	    headerBackTitle:"返回按钮自定义"
	  }
	  render() {
	    const {navigation} = this.props;
	    return (
	      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
	        <Text>欢迎来到homePage首页</Text>
	        <Button
	          title="Go to Page1"
	          onPress={() => {
	            navigation.navigate('Page1',{name:"动态的设置的"});
	          }}
	        />
	        <Button
	          title="Go to Page2"
	          onPress={() => {
	            navigation.navigate('Page2');
	          }}
	        />
	        <Button
	          title="Go to Page3"
	          onPress={() => {
	            navigation.navigate('Page3',{title:"devi"});
	          }}
	        />
	      </View>
	    );
	  }
	}

	5.Page1.js 子页面1
		import React from 'react';
		import { Button, View, Text } from 'react-native';
		import { createStackNavigator, createAppContainer } from 'react-navigation';
		
		export default class Page1 extends React.Component {
		  render() {
		    const {navigation} = this.props;
		    return (
		      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
		        <Text>欢迎来到page1</Text>
		        <Button
		          title="返回首页"
		          onPress={() => {
		            navigation.goBack();
		          }}
		        />
		      </View>
		    );
		  }
		}

	6.Page2.js 子页面2
		import React from 'react';
		import { Button, View, Text } from 'react-native';
		import { createStackNavigator, createAppContainer } from 'react-navigation';
		
		export default class Page2 extends React.Component {
		  render() {
		    const {navigation} = this.props;
		    return (
		      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
		        <Text>欢迎来到page2</Text>
		        <Button
		          title="返回首页"
		          onPress={() => {
		            navigation.goBack();
		          }}
		        />
		      </View>
		    );
		  }
		}

	7.Page3.js 子页面3
		import React from 'react';
		import { Button, View, Text, StyleSheet,TextInput} from 'react-native';
		import { createStackNavigator, createAppContainer } from 'react-navigation';
		
		export default class page3 extends React.Component {
		    
		    render() {
		        const {navigation} = this.props;
		        const {state,setParams} = navigation;
		        const {params} = state;
		        const TextContent = params.mode === "edit" ? "正在编辑" : "保存完成";
		        return (
		        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
		            <Text>欢迎来到page3</Text>
		            <Button
		            title="返回首页"
		            onPress={() => {
		                navigation.goBack();
		            }}
		            />
		            <Text>{TextContent}</Text>
		            <TextInput 
		                style={styles.input}
		                onChangeText={text=>{
		                    setParams({title:text})
		                }}
		            />
		        </View>
		        );
		    }
		}
		
		const styles = StyleSheet.create({
		    input:{
		        width:100,
		        height:50,
		        borderWidth: 1,
		        marginTop:20,
		        borderColor:'black'
		    }
		})

5. react-Navigation 的基本使用 - 底部导航开发（2）

		1.开发底部与顶部Tab切换使用的是：createBottomTabNavigator

		2.安装三方包（图标使用）
			yarn add react-native-vector-icons或
			npm install react-native-vector-icons --save
			
		3.自动link
			react-native link react-native-vector-icons

功能的实现：AppNavigators.js
	export const AppTabNavigator = createBottomTabNavigator({
		    Page1:{
		        screen:Page1,
		        navigationOptions:{
		            tabBarLable:"Page1",
		            tabBarIcon:({tintColor,focused}) =>(
		                <Ionicons
		                    name={focused?'ios-people':'ios-people'}
		                    size={26}
		                    style={{color:tintColor}}
		                />
		            )
	        }
	    },
	    Page2:{
	        screen:Page2,
	        navigationOptions:{
	            tabBarLable:"Page2",
	            tabBarIcon:({tintColor,focused}) =>(
	                <Ionicons
	                    name={focused?'ios-chatboxes':'ios-chatboxes'}
	                    size={26}
	                    style={{color:tintColor}}
	                />
	            )
	        }
	    },
	    Page3:{
	        screen:Page3,
	        navigationOptions:{
	            tabBarLable:"Page3",
	            tabBarIcon:({tintColor,focused}) =>(
	                <Ionicons
	                    name={focused?'ios-hammer':'ios-hammer'}
	                    size={26}
	                    style={{color:tintColor}}
	                />
	            )
	        }
	    }
	})

6.抽屉导航开发

7.FlatList 、 VirtualizedList 列表渲染（react-native组件）

	本组件支持 下拉刷新，上拉加载；
	FlatList 是基于VirtualizedList组件的封装；

8.SwipeableFlatList 侧滑删除效果组件（react-native组件）

9.SectionList 带有分类的列表渲染组件

	1.有粘连头部效果

10.ListView (已经放弃组件)

1.<ListView
		dataSource={this.state.dataSource} //数据源
		renderRow={(item)=>this.renderRow(item)} //每一行显示效果
		renderSeparator={(sectionID,rowID,adjacentRowHighlt)}//每一行分割线
		renderFooter={()=>this.renderFooter()}//显示页脚
		refreshControl={<RefreshControl  //下拉刷新
							refreshing={this.state.isLoading}
							onRefresh={()=>this.onLoad()}
							/>}
		
	></ListView>

11.网络请求 Fetch

1.Fetch 是react-natvie 内置的 所以可以直接使用

12.tab 切换库 react-native-scrollable-tab-view

import ScrollableTabView,{ScrollableTabBar} from "react-native-scrollable-tab-view"
 	<ScrollableTabView 
 		renderTabBar={()=<ScrollableTabBar />}
	>
	<Text tabLabel="java">java</Text>
	<Text tabLabel="java">java</Text>
	<Text tabLabel="java">java</Text>
	<Text tabLabel="java">java</Text>
</ScrollableTabView>
设置阴影：ios: shadowColor
				android: elevation

13.react-native 本地化存储 AsyncStorage

简单的、异步的、持久化的key-value存储系统
官方推荐的数据存储方式，旨在代替LoaclStorage

14 flex

flexDirection

IT_大象

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开发reactNative

一、开发准备1、技术栈：javascriptes5/es6 (ECMA 是规范 javascript 是实现)（es6规范涵盖es2015 es2016 ...）框架：react (简单的方式创建网页与交互)布局方式：Flexbox 弹性框布局规范存储方式：AsyncStorage 网络操作：Fetch封装自己组建：Native Modules （Xcode）原生学习：Andr...
复制链接

扫一扫