webStrom+android studio 来调整react native项目的布局

最新推荐文章于 2021-05-29 04:00:58 发布
最新推荐文章于 2021-05-29 04:00:58 发布
阅读量293 收藏
点赞数
分类专栏： React Native开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hu_wenpeng/article/details/100535957
版权

使用webstorm开发rn 使用webstorm 关联rn项目 使用android studio关联rn项目的android目录
然后 在webstorm的命令窗口下 执行react-native run-android 把项目跑到android手机上
在这里插入图片描述
手机上app安装成功后 我们在android studio里面是可以看到 我们项目的进程的 如下图：
在这里插入图片描述
然后我们使用android studio的 Toos-> Layout inspector
在这里插入图片描述
然后我们就可以得到下面的图 发现在图标不居中
在这里插入图片描述
修改代码后：再次 layout inspector 发现在居中了 使用这种方法我们可以看到 我们组件的层次结构（如果是从事android的应该 经常用这外功能的）
在这里插入图片描述

雨人来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webStrom安装及环境搭建
03-01
本文档是webStrom的安装，以及node.js环境的搭建，讲述loopback接口等知识
webstorm 运行android,Windows React Native环境搭建:webstorm+android studio 及解决热更新
weixin_36325338的博客
05-29 519
工具准备：SDKAndroid SDK Build-tools：23.0.1SDK Platform：Android N 、6.0 、5.1.1、5.0.1、4.4.2、4.1.2Android模拟器镜像：6.0、5.1和4.1python使用 python2nodejs使用官网最新即可更改源：npm config set registry https://registry.npm.taobao....
webstorm 运行android,001 window环境搭建（androidstudio+webstorm）
weixin_39563132的博客
05-29 300
1：android stduio +SDK +JDK(as 的配置就不多说了)2：下载node.js 推荐最新版(至少也是4.1以上)3：配置环境变量 ANDROID_HOME 指向SDK目录(as中localproperties文件中有)，加入Path4：打开命令窗口，执行npm install -g react-native-cli 引入插件库5：进入你想要新建工程的...
webstorm 运行android,WebStorm下的代码无法在Android模拟器上访问
weixin_36310662的博客
05-29 463
极客学院-海鸥:您说的这种情况我，我早就考虑过。答案是不行的。它在视频里演示的就是用webstorm启动了一个网页是localhost：63343/myapp/index.html。我用本地的netstat -an|grep 63343终端命令查看监听的端口 是:netstat -an|grep 63343tcp4 0 0 127.0.0.1.63343 12...
react native：在windows上搭建安卓环境并在虚拟机上启动Hello World
weixin_43442246的博客
04-10 785
React Native 是Facebook开源的跨平台移动应用开发框架，熟悉前端开发的容易上手，学习一次便能很快进行双端移动App的开发。 一，环境搭建准备 windows系统（建议8G内存或以上） Node Python2 JDK1.8 Android Studio 二，JDK1.8安装盘配置（略） 三，安装配置Node 打开NodeJs的官网下载页面：https://nodejs.org/e...
React Native环境配置和简单使用
黑森林工作室
10-21 4032
React Native 开发环境配置 在安装 React Native 之前我们需要先配置一下所需的开发环境，具体详细见下面 环境要求安装 Homebrew（ Homebrew 是 OSX 的套件管理器，我们可以通过它获取并安装很多需要的组件 安装方式：打开 Mac 的终端 → 粘贴命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.co
React Native开发者菜单&Chrome调试
小小T的专栏
09-27 4383
React Native项目的开发者菜单打开如下： Reload Reload即将项目中js代码部分重新生成bundle，然后传输给模拟器或手机； Reload在只是修改了js代码的情况下，如果要预览修改结果，你不需要重新编译你的应用。在这种情况下，你只需要告诉React Native重新加载js即可。 注意：如果你修改了native 代码或修改了Images.xcassets、res/d...
React Native学习提纲
博水之野，人杰地灵
04-14 440
本提纲由（兰总整理，兰总是启发我学习rn的第二人，牛总是第一人）一、React.js入门基础1.基础HTML/CSS与基础开发工具使用 - html基础 doctype、常用标签、标签闭合、自定义属性 - css基础 选择器（id、class）、常用样式、样式覆盖、行内样式、绝对与相对定位、flexbox布局 - 基础开发工具 使用Chrome调试网页、使用Webstorm编辑代码、使用
React-Native 之 环境配置和简单使用
weixin_30526593的博客
10-21 60
# 前言 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢 更新公告： 更新...
Android原生项目集成React Native的方法
08-28
this is my first react example
适用于 Android 和 iOS 的 React Native NFC 模块 react-native-nfc
05-28
为 React Native 带来 NFC 功能。灵感来自phonegap-nfc和react-native-ble-manager 该库最简单（也是最常见）的用例是读取NFC包含 的标签NDEF，可以通过以下代码实现： import React from 'react'; import {View, ...
Android原生项目集成最新版本ReactNative
最新发布
01-30
原生项目集成最新版本ReactNative，手把手教你如何一步步集成到原生项目中
Android 项目中嵌入 ReactNative
01-13
Android 项目中嵌入 ReactNative
原有android项目接入react-native|CapManage.zip
11-19
api请求 支持await-async promise, redux, store 路由管理,支持左滑菜单
AndroidStudio和WebStorm协同开发之坑点
Tiny的专栏
12-10 7541
WebStorm和AndroidStudio打开统一应用，报Files Changed，需要重加加载的问题，open same project in both webstorm and intellij and prevent asking “project file changed” window，Project components were changed 。
Mac下命令行下 报 env: bash\r: No such file or directory
Hu_wenpeng的博客
10-07 4702
我是从window下拷贝的 react-native 项目执行 react-native run-android 时候报 env: bash\r: No such file or directory 解决办法： 1、brew install dos2unix 2、find . -type f -exec dos2unix {} \; 第二步的分号前有个 具体解释看下面两篇博客： 关于unix和w...
react native中 Text组件设置文字的居中
Hu_wenpeng的博客
08-15 3055
首先看官网文档 查看Text的属性 设置上之后发现文字是 水平居中了 但没有垂直居中 又发现在了这个属性垂直对齐属性 然后全部设置上才达到效果 其实仔细想一样 Text组件文字 是从左到右排列的也就是 Text组件的布局方向 应该是row 那么 textalign 作用的就和justfityContent的作用是一样的了。 ...
react native 项目的入口 index.js
Hu_wenpeng的博客
08-21 1996
找到root1.default
Android Studio使用react-native-sound
09-16
你可以在Android Studio中通过以下步骤来使用react-native-sound： 1. 首先，在你的React Native项目根目录下打开终端或命令行窗口。 2. 运行以下命令来安装react-native-sound库： ``` npm install react-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值