Skip to content

Latest commit

 

History

History
145 lines (68 loc) · 3.95 KB

学习.md

File metadata and controls

145 lines (68 loc) · 3.95 KB

react Native 中不能使用了前端的div a 等控件

手机链接电脑后 运行 adb devices 查看电脑链接的手机,如果没有显示链接的手机,就把手机的开发者模式打开,如果 把开发者模式打开后还是没有显示,就尝试下载 “豌豆荚” 这类的工具,让它帮助PC去下载手机驱动 如果还是连接不上可以换一个设备试试。

手机摇一摇会出现选择页面,记得开发者模式一定要打开不然不会出现

-----------------------------------介绍项目结构------------------------------

在RN中只能使用jx作为后缀名,不能使用jsx 在RN中主轴默认是竖轴的,这个和网页的相反

StyleSheet //样式相关的组件,用来专门创建样式的,在这里写样式的话,会有提示

// const styles = StyleSheet.create({ 使用StyleSheet.create创建样式时,可以为creat创建一个配置对象,这个对象就是要创建的样式 // allView:{ // backgroundColor:"red" // }

// })

// const styles = { 这种是没有提示的 // allView:{ // backgroundColor:"#00b5ad" // }

// }

index.jx:

import {AppRegistry} from 'react-native'; //导入AppRegistry组件进行首页的注册 import App from './App'; import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App); //进行首页的注册 ,appName这是项目的名称,这个不能改,像app这样的事第二个参数,是指将那个 页面指定为首页

----------------------------------组件介绍-----------------------------------

import React, {Component} from 'react' //和React一样导入react组件 import { View ,Text} from 'react-native' //引入reactnative提供的UI库 export default class myApp extends Component{ constructor(){ super() }

render(){ return Engine: Hermes }

}

-------------------------------------首页的实现-------------------- 底部tab的实现 不推荐npm下载包,第一是下载慢,第二是如果npm 是5.0及以下的话会把项目中的老包删除,所以推荐 facebook的 yarn add 包

例如: npm install react-native-tab-navigator --save

yarn add react-native-tab-navigator

轮播图的组件需要设置一个View设置高度

联网请求直接用fetch,进行联网请求

RN 中默认为所有的View启用flex 并且主轴是竖向的

RN 中的项目库 ,百度搜索 Ant design mobile

-------------------------------------------RN中的路由------------------------------- https://github.com/aksonov/react-native-router-flux //这是封装的路由,这个路由比较好用 引入了这个路由后,发现页面不显示,奇怪

后来才发现是自己的问题

Install native dependencies used by React Native Router (https://reactnavigation.org/docs/en/getting-started.html) Install this component
yarn add react-native-router-flux //我只看到了这一个 install the following libraries first //必须安装这些起 react-native-screens by ( npm install react-native-screens || yarn add react-native-screens) react-native-gesture-handler ( npm install react-native-gesture-handler || yarn add react-native-gesture-handler) react-native-reanimated (npm install react-native-reanimated || yarn add react-native-reanimated)

所以安装了这些再安装这个库 yarn add @react-navigation/native react-native-screens by ( npm install react-native-screens || yarn add react-native-screens) react-native-gesture-handler ( npm install react-native-gesture-handler || yarn add react-native-gesture-handler) react-native-reanimated (npm install react-native-reanimated || yarn add react-native-reanimated)

最后安装

yarn add react-native-router-flux

---------------------------------------------RN如何卸载依赖库------------------------- npm uninstall 包名