react-native

react-native

混合开发 app android ios

需要安装

1. 内存 8G + SSD 2min 10min
2. SDK: android 4G 10G
3. android-studio + 模拟器

java 下载
jdk下载
安卓开发的环境变量配置

全局下载
npm install -g yarn react-native-cli
启动
react-native run-android

踩到的坑

1. 
   重启，开启时一直按f2，出现蓝屏，进行选择
2. 
   _使用node v12.13.0 的话
   可以修改node_modules/metro-config/src/defaults/blacklist.js里面的sharedBlacklist

	/node_modules[/\\]react[/\\]dist[/\\].*/等==>
	/node_modules[\/\\]react[\/\\]dist[\/\\].*/,

前端如何上传图片到七牛云

圈子 zhongxue

组件

View
文本内容的组件： Text 
检测平台的组件：Platform :  ios  /  android
图片：Image

路由

1. 在已创建的项目中安装
   yarn add react-navigation

2. 安装和配置大多数导航器使用的依赖项
   yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23 react-navigation-stack

3. 为了完成 react-native-screens 在 Android 上的安装, 请在android/app/build.gradle 中 dependencies 选项中添加下面这两行:

   implementation ‘androidx.appcompat:appcompat:1.1.0-rc01’
   implementation ‘androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02’

index.js

	import App from './App';

App.js

	import React from 'react';
	import { View, Text } from 'react-native';
	// createAppContainer  高阶组件
	import { createAppContainer } from 'react-navigation';
	// createStackNavigator  配置路由栈
	import { createStackNavigator } from 'react-navigation-stack';
	import Home from './src/pages/Home'
	import Details from './src/pages/Details'
	
	
	const AppNavigator = createStackNavigator(
	  {
	    Home,
	    Details:Details,
	  },
	  {
	    // 初始化路由页面
	    initialRouteName: 'Home',
	  }
	);
	
	export default createAppContainer(AppNavigator);

Home.js

	// rpc 快捷键
	
	import React, { PureComponent } from 'react'
	import {View,Text,Button} from "react-native"
	
	export default class Home extends PureComponent {
	  render() {
	    return (
	      <>
	        <View>
	            <Text>我是主页</Text>
	            <Button
	              title="details"
	              onPress={()=>{
	              //router  navigate跳转到哪一个页面
	                this.props.navigation.navigate('Details')
	              }}
	            />
	        </View>
	      </>
	    )
	  }
	}