标签: react-native

你如何调试React Native?

当应用程序在应用程序模拟器中运行时,如何使用React Native调试其React代码?

debugging android ios react-native

241
推荐指数
23
解决办法
16万
查看次数

Android无法加载JS包

我正在尝试在我的Nexus5(Android 5.1.1)上运行AwesomeProject.

我能够构建项目并将其安装在设备上.但是当我运行它时,我得到一个红色屏幕说

无法下载JS包.您是否忘记启动开发服务器或连接设备?

在本机iOS中,我可以选择离线加载jsbundle.我怎么能为Android做同样的事情?(或者至少,我在哪里可以配置服务器地址?)

更新

要使用本地服务器运行,请在react-native项目根目录下运行以下命令

  1. react-native start > /dev/null 2>&1 &
  2. adb reverse tcp:8081 tcp:8081

请查看dsissitka的答案了解更多详情.

要在没有服务器的情况下运行,请通过运行以下命令将jsfile捆绑到apk中:

  1. 在下创建一个资产文件夹 android/app/src/main
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

请查看kzzzf的答案以获取更多详细信息.

android react-native

194
推荐指数
7
解决办法
11万
查看次数

使用React Native时,我有哪些存储数据的选项?(iOS和Android)

我在React Native世界中仍然是新手,并且通常也在移动/本地世界,我发现文档在数据持久性方面有点缺乏.

我在React Native中存储数据的选项有哪些?每种类型的含义是什么?例如,我看到有本地存储和异步存储,但后来我也看到像Realm这样的东西,我很困惑所有这些都适用于外部数据库.

我特别想知道:

  • 数据持久性的不同选择有哪些?
  • 对于每个,持久性的限制是什么(即数据何时不再可用)?例如:关闭应用程序时,重新启动手机等.
  • 对于每一个,在iOS和Android之间实现之间是否存在差异(除了一般设置)?
  • 如何比较离线访问数据的选项?(或者通常如何处理离线访问?)
  • 我还应该记住其他任何考虑因素吗?

谢谢你的帮助!

android ios react-native

190
推荐指数
4
解决办法
7万
查看次数

如何在Android模拟器中"摇动"Android设备以显示开发菜单以调试我的React Native应用程序

我正在开发一个跨平台的React Native移动应用程序.我在开发时正在编写console.log语句.我想在默认的Android模拟器中运行Android应用时在Chrome中看到这些日志记录语句.根据Facebook的文档,我只需要"摇动设备".我如何在Android模拟器中执行此操作?

要访问应用内开发者菜单:

在iOS上摇动设备或在模拟器中按控制键+⌘+ z.在Android上摇动设备或按下硬件菜单按钮(在旧版>设备和大多数模拟器中可用,例如在genymotion中,您可以按⌘+ m以>模拟硬件菜单按钮单击)

android android-emulator react-native

186
推荐指数
11
解决办法
8万
查看次数

React Native Flexbox中的100%宽度

我已经阅读了几个flexbox教程,但我仍然无法使这个简单的任务工作.

如何将红色框设为100%宽度?

在此输入图像描述

码:

  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    <Text style={styles.line1}>
      line1
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>
Run Code Online (Sandbox Code Playgroud)

样式:

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
  flexDirection: 'column',
},
welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
  borderWidth: 1,
},
line1: {
    backgroundColor: '#FDD7E4',
},
instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
  borderWidth: 1,
},
Run Code Online (Sandbox Code Playgroud)

谢谢!

更新1: Nishanth Shankar的建议,为包装器添加flex:1,flexDirection:'row'

输出:

在此输入图像描述

码:

  <View …
Run Code Online (Sandbox Code Playgroud)

flexbox react-native

184
推荐指数
6
解决办法
18万
查看次数

如何生成一个可以在没有带反应原生的服务器的情况下运行的apk?

我已经构建了我的应用程序,我可以在我的本地模拟器上运行它(也可以通过更改调试服务器在同一网络中的我的Android设备上运行).

但是,我想构建一个apk,我可以发送给没有访问开发服务器的人,我希望他们能够测试应用程序.

我看到在文档的iOS部分有一个使用脱机捆绑的部分.但我无法弄清楚如何为Android做同样的事情.这可能吗?如果是这样,怎么样?

更新:关于这个问题的答案(反应原生android无法加载JS包),据说离线包可以从开发服务器下载.但是当我从开发服务器获取捆绑包时,无法加载图像文件.

javascript android mobile-application react-native

173
推荐指数
17
解决办法
18万
查看次数

ReactNative:如何居中文字?

如何在水平和垂直中将ReactNative中的文本居中?

我在rnplay.org中有一个示例应用程序,其中justifyContent ="center"alignItems ="center"不起作用:https: //rnplay.org/apps/AoxNKQ

文本应该居中.为什么文本(黄色)和父容器之间的顶部有一个边距?

码:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                    <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text>

                </View>
                <View style={styles.otherContainer}>
                </View>
            </View>
    );
  }
});

var styles = StyleSheet.create({

    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
    },

    topBox: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'lightgray', …
Run Code Online (Sandbox Code Playgroud)

flexbox reactjs react-native

171
推荐指数
11
解决办法
18万
查看次数

React Native Version Mismatch

在初始化新项目然后启动x-code模拟器时获取以下消息."React-Native Version Mismatch"Javascript版本0.50.1原生版本:0.50.0

确保您已重建本机代码...

有谁知道这里发生了什么,可以帮助我吗?

谢谢!

在此输入图像描述

react-native react-native-android react-native-ios

166
推荐指数
11
解决办法
9万
查看次数

react-native中"No bundle URL present"的含义是什么?

当我运行一个本机反应项目时,我得到一个错误no bundle URL present,但我不知道我做了什么错,我很困惑.

在此输入图像描述

ios reactjs react-native

163
推荐指数
24
解决办法
8万
查看次数

React-Native,Android,Gen​​ymotion:ADB服务器没有确认

我在Mac上使用React-Native,Android和Genymotion.当我运行时,react-native run-android我在启动操作结束时得到这些行:

...
04:54:40 E/adb: error: could not install *smartsocket* listener: Address already in use
04:54:40 E/adb: ADB server didn't ACK
04:54:40 E/ddms: '/Users/paulbrie/Library/Android/sdk/platform-tools/adb,start-server' failed -- run manually if necessary
04:54:40 E/adb: * failed to start daemon *
04:54:40 E/adb: error: cannot connect to daemon
:app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: Timeout getting device list.
...
Run Code Online (Sandbox Code Playgroud)

但是,adb devices返回此信息:

List of devices attached
192.168.59.101:5555 …
Run Code Online (Sandbox Code Playgroud)

android genymotion react-native

158
推荐指数
5
解决办法
8万
查看次数