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 包名