f8app在window安装教程

这货,花了我好几天时间

IDE:androidStudio,可以按照提示修改错误

1、建立一个空的文件夹!!!这一步很重要

2、$ git clone https://github.com/fbsamples/f8app.git

3、$ cd f8app

4、$ npm install

这一步我出现了好多不知所措的错误,然后神奇的是,多装几次就好了!!!

5、运行mongod --dbpath "W://MongoDB//data"

https://github.com/ReactWindows/f8app/blob/data/mongodb/db.zip

db.zip解压后的文件拷贝到W://MongoDB//data下

mongod --dbpath "W://MongoDB//data"

打开mongodb 确保运行起来: https://www.cnblogs.com/Joans/p/3706406.html

6、启动 Parse/GraphQL servers

$ npm start

npm run import-data 这条命令运行会百分百报错SyntaxError:Unexpected token P in JSON at position 0 ,所以不要这个命令了。什么去除https证书验证、代理都没有,因为那个请求链接已经关闭

http://blog.csdn.net/industriously/article/details/73302207


7、确认下面的地址是可以访问的,并且是有数据的

http://localhost:8080/dashboard

http://localhost:8080/graphql

打开http://localhost:8080/graphql

输入

query{

 schedule{

   title

   speakers{

     name

     title

    }

   location{

     name

    }

  }

}

运行有结果

8、react-native start  这句必须有


9、react-native run-android

Exception in thread "main"java.lang.RuntimeException: Timeout of 120000 reached waiting for exclusiveaccess to file:/Users/weidingqiang/.gradle/wrapper/dists/gradle-2.4-all/3i2gobhdl0fm2tosnn15g540i0/gradle-2.4-all.zip

at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:61)

at org.gradle.wrapper.Install.createDist(Install.java:47)

at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:129)

at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:48)

 

解决方法

https://services.gradle.org/distributions/下载链接

1.重新下载gradle-3.3-all.zip,进入一堆乱码的文件夹,比如2n0i7hqatcbtk57vvql575dbap

2.不要删除里面的.lck和.part等文件,直接拷贝下载的gra

dle-3.3-all.zip文件到该目录


在androidstudio运行,按照他的suggestion改就OK了

接下来出现的都是版本问题,我也不知道怎么改了,改了好多次,最后可以了


最后成功运行!!!!!



运行方式

react-native  init 项目名

reactNative利用androidStudio运行:

在androidStudio 打开android文件夹,一定要打开这个,不然不能正常运行

在项目目录下运行react-native start 启动package server,

在androidstudio点击run->app

adb shell input keyevent 82 打开菜单

 

或者

 

reactNative真机运行:USB手机连接电脑,

在项目目录下运行react-native run-android

摇晃设备或按Menu键可以打开调试菜单,点击Dev Settings,

选Debug server host for device,

输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,

再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

 

adb devices查看连接电脑的手机设备

 

creact-react-native-app 项目名这种方法是创建纯粹的react-native,没有和安卓混合开发

真机运行react-native遇到了的问题

 

1adbserver version (32) doesn't match this client (36); killing...

最后原因是因为手机驱动安装失败

解决方法:豌豆荚


2、

解决方法

 

3、

解决方法:修改两个地方

http://blog.csdn.net/mapboo/article/details/53419838

 

 

 

其他:

构建 F8 App / ReactNative 开发指南

https://f8-app.liaohuqiu.net/

 

F8App-ReactNative项目源码分析4-js篇

http://blog.csdn.net/offbye/article/details/51586227

 


uniapp 是一款基于 Vue.js 的跨平台应用框架,支持快速构建原生体验的移动应用、小程序及微信公众号等。在 uniapp 开发过程中,状态栏是位于应用顶部的一个区域,通常用于显示系统通知、时间、电池电量等信息,并且可以自定义背景色。 **uniapp 中的状态栏的主要功能和配置包括以下几个方面:** ### 1. 显示内容 - **通知信息**:通常在设备处于待机模式或充电时显示通知。 - **系统图标**:如时间、电池电量指示器等。 - **自定义背景颜色**:通过样式设置调整状态栏的颜色,使其与应用程序的主题相匹配。 ### 2. 配置方式 在 uniapp 中,你可以通过配置文件 `.vue` 或 `.json` 文件来调整状态栏的外观和功能: #### 使用 `App.vue` 在 App.vue 文件中,你可以利用 `style` 属性来自定义状态栏背景颜色: ```html <template> <view class="page"> <!-- 页面组件 --> </view> </template> <style> .page { background-color: #fff; /* 设置页面背景颜色 */ } /* 自定义状态栏颜色 */ #app .uni-page-bar .uni-header { color: #000; } #app .uni-page-bar .uni-header { background-color: #F7F8FA; } </style> ``` #### 使用 `uni-app.json` 在项目根目录下的 `uni-app.json` 文件里,你可以直接指定状态栏的样式属性: ```json { "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#f4511e", "navigationBarTitleText": "uni-app", "navigationBarTextStyle": "white" } } ``` 上述配置中,“window”部分包含了对窗口级别的样式控制,例如改变导航栏的背景颜色、标题文字的颜色和样式等。其中,状态栏背景颜色默认由操作系统决定,但在某些情况下需要额外调整,可以在更详细的样式层面上进行定制。 ### 3. 关于状态栏的其他注意事项: - **兼容性**:不同平台(Android、iOS)以及不同版本的操作系统对于状态栏的支持程度存在差异,因此在开发时需要注意兼容性和性能优化。 - **响应式设计**:确保状态栏的处理不影响应用的整体布局和用户体验。 ### 相关问题: 1. 如何在 uniapp 应用中自定义状态栏的背景颜色? 2. uniapp 中如何处理状态栏与导航栏之间的位置关系? 3. uniapp 对于状态栏的适配策略是什么?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值