React Native 入门踩坑

最新推荐文章于 2024-03-20 09:30:28 发布
最新推荐文章于 2024-03-20 09:30:28 发布
阅读量583 收藏 1
点赞数
分类专栏： react-native 安卓app 前端 文章标签： react native react app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S3328047358/article/details/119383703
版权
前端 同时被 3 个专栏收录
54 篇文章 0 订阅
订阅专栏
安卓app
6 篇文章 0 订阅
订阅专栏
react-native
3 篇文章 0 订阅
订阅专栏

开发环境搭建及环境变量配置

开发rn第一步需要配置安卓环境

android studio下载地址: https://developer.android.google.cn/studio/archive

参考官方文档 使用科学的上网方式配置即可

官网参考地址: https://www.react-native.cn/docs/environment-setup

我的环境 macos+ 安卓;

初始化项目

npx react-native init ProjectName
cd 项目文件
yarn install

运行官方demo

项目初始化完成 我们先来跑起来;

选用网易mumu模拟器来运行;

参考地址: https://blog.csdn.net/S3328047358/article/details/119324911

配置好 网易mumu

npm run start // 启动服务 开发调试期间不要关闭　一般运行在8081 可使用127.0.0.1:8081访问查看
npm run android //  随后可以看到 demo被打包运行在模拟器上
// 开发工程有问题 不能解决 尝试重新运行

##　调试: 标签结构,控制台,网络请求

方式一：　谷歌浏览器　查看控制台及网络请求

点击 摇一摇 一次不行 多点几次, 会弹出开发者菜单

在这里插入图片描述
在这里插入图片描述

点击 Debug 会自动打开localhost: 8081

打开控制台 查看输出

网络请求需要添加代码才能查看

找到项目的入口文件 index.js, 加入以下代码即可

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest

方式二：　推荐使用 react-native-debugger　　三方面都可调试

下载软件: https://github.com/jhen0409/react-native-debugger

先启动软件;

在到模拟器中启动 开发者菜单 点击debug

这样模拟器和调试器就会链接在一起啦

标签结构便捷查看参考官方文档:

https://www.react-native.cn/docs/debugging#integration-with-react-native-inspector

控制台直接看即可

在这里插入图片描述

网络请求需要修改配置看:

菜单栏Debugger => openConfig file => defaultNetworkInspect 改成 true

在这里插入图片描述

方式三: 真机调试

参考: https://www.react-native.cn/docs/running-on-device

修改目录结构

在这里插入图片描述

配置路由

使用官方推荐的 react-navigation: https://reactnavigation.org/docs/stack-navigator/

安装

npm install @react-navigation/native

npm install @react-navigation/native-stack

路由依赖

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

react-navigation路由思路和react-router的思路是相同的 都是组件化的路由, 路由配置在哪里 只要和地址匹配就会被渲染;

###　路由基本使用:

// App.js 文件
import React from 'react';
import { View  } from 'react-native';
import Nav from './src/routers/nav';

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render(){
    return (
        <View style={{flex: 1}}>
            <Nav></Nav>
        </View>
    )
  }
}

export default App;

//  /src/routers/nav.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import { createNativeStackNavigator } from '@react-navigation/native-stack';
//  导入创建堆栈导航方法
import Login from '../pages/login';
import Home from '../pages/home';
//创建导航
const Stack = createNativeStackNavigator();

class Nav extends React.Component {
  render(){
    return (
      <NavigationContainer>
        {/* 
          initialRouteName  初始默认路由 可用字段动态渲染 
          如不设置默认路由, 则会自动匹配第一个路由页面
        */}
        {/* screenOptions  设置所有导航栏默认样式 */}
        <Stack.Navigator initialRouteName='login' screenOptions={{
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }
        }>
           <Stack.Screen name="login" component={Login} />
           {/* options 设置顶部页面标题及样式 */}
           <Stack.Screen name="home" component={Home} options={{
             headerShown: false,  //是否显示标题
             title: '首页',
             headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            }
          }}/>
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

export default Nav

// /src/pages/home/index.js  路由跳转及传参

import React from 'react';
import { View, Text, Button } from 'react-native';

class Home extends React.Component {
  constructor(props){
    super(props)
    console.log('home页面');
  }
  toLoginWidthParams = () => {
    this.props.navigation.push('login', {
      con: '传递参数',
      id: '123'
    });
    // navigation.push('Details')        切换页面
    // navigation.replace('Details')     替换页面
    // navigation.goBack()               返回
    // navigation.popToTop()             回到最顶层页面
  }
  toLogin = () => {
    console.log('去登录页面');
    this.props.navigation.navigate('login');
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{color: 'red',fontSize: 14, flex: 1}}>
          <Text>首页内容</Text>
          <Button title="去登录页面1" onPress={this.toLogin}></Button>
          <Button title="带参数去登录页面" onPress={this.toLoginWidthParams}></Button>
        </View>
      </View>
    )
  }
}

export default Home;


// /src/pages/login/index.js   路由参数接受

import React from 'react';
import { View, Text, Button } from 'react-native';

class Login extends React.Component {
  constructor(props){
    super(props)
  }
  componentDidMount() {
    let params = this.props.route.params; //接收参数
    console.log('login componentDidMount', params);
  }
  toHome = () => {
    this.props.navigation.push('home');
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{color: 'red',fontSize: 14, flex: 1}}>
          <Text>这是login页面</Text>
          <Button title='去首页' onPress={this.toHome}></Button>
        </View>
      </View>
    )
  }
}

export default Login;

嵌套及tabbar路由

npm install @react-navigation/bottom-tabs

参考地址: https://reactnavigation.org/docs/tab-based-navigation

​ https://reactnavigation.org/docs/nesting-navigators

// /src/routers/nav.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import { createNativeStackNavigator } from '@react-navigation/native-stack';
//  导入创建堆栈导航方法
import Login from '../pages/login';
import TabBar from '../pages/tabBar'
//创建导航
const Stack = createNativeStackNavigator();

class Nav extends React.Component {
  render(){
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName='tabBar'>
          <Stack.Screen name="tabBar" component={TabBar} options={{
              headerShown: false
            }}/>
          <Stack.Screen name="login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

export default Nav;

// /src/pages/tabbar/index.js
import React from 'react';
import { View, Text } from 'react-native';
// 官方推荐库
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from '../home';
import Articles from '../articles';
//创建导航
const Tab = createBottomTabNavigator();

class TabBar extends React.Component {
  constructor(props) {
    super(props)
  }
  render(){
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1}}>
          <Tab.Navigator initialRouteName='home' screenOptions={({ route }) => ({
              tabBarIcon: ({ focused, size }) => {
                // 可以返回任何组件内容, 但一般是图标
                let color = focused ? 'red' : 'gray';
                return <Text style={{ fontFamily: "iconfont", color, fontSize: 30 }} >图标</Text>;
              },
            })}
            tabBarOptions={{
              activeTintColor: 'red',
              inactiveTintColor: 'gray',
            }}>
            {/* options 设置顶部页面标题及样式 */}
            <Tab.Screen name="home" component={Home} options={{
              headerShown: false,
              tabBarBadge: 3,
            }}/>
            <Tab.Screen name="articles" component={Articles} options={{
              headerShown: false
            }}/>
          </Tab.Navigator>
        </View>
      </View>
    )
  }
}

export default TabBar;

// /src/pages/home/index.js
import React from 'react';
import { View, Text, Button } from 'react-native';

class Home extends React.Component {
  constructor(props){
    super(props)
    console.log('home页面');
  }
  toLoginWidthParams = () => {
    this.props.navigation.push('login', {
      con: '传递参数',
      id: '123'
    });
  }
  toLogin = () => {
    console.log('去登录页面');
    this.props.navigation.navigate('login');
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{color: 'red',fontSize: 14, flex: 1}}>
          <Text>首页内容</Text>
          <Button title="去登录页面1" onPress={this.toLogin}></Button>
          <Button title="带参数去登录页面" onPress={this.toLoginWidthParams}></Button>
        </View>
      </View>
    )
  }
}


export default Home;

在这里插入图片描述

// /src/pages/articles/index.js
import React from 'react';
import { View, Text, Button } from 'react-native';

class Articles extends React.Component {
  constructor(props){
    super(props)
    console.log('Articles组件');
  }
  componentDidMount() {
    let params = this.props.route.params; //接收参数
    console.log('componentDidMount', params);
  }
  goHome = () => {
    // this.props.navigation.push('home');
    // 本页面跳转 home 页 需要用这个方法; push方法在嵌套路由无效果
    this.props.navigation.navigate('home');
  }
  render() {
    return (
      <View style={{flex: 1}}>
      <View style={{color: 'red',fontSize: 14, flex: 1}}>
        <Text>这是Articles页面</Text>
        <Button title="去首页" onPress={this.goHome}></Button>
      </View>
      </View>
    )
  }
}
export default Articles;

在这里插入图片描述

// /src/pages/login/index.js
import React from 'react';
import { View, Text, Button } from 'react-native';

class Login extends React.Component {
  constructor(props){
    super(props)
  }
  componentDidMount() {
    let params = this.props.route.params; //接收参数
    console.log('login componentDidMount', params);
  }
  goArticle = () => {
    // 嵌套路由导航切换 使用此方法 不带参数
    this.props.navigation.navigate('articles');
    // 带参数跳转方式
    // this.props.navigation.navigate('tabBar', { screen: 'articles', params: { con: '传递参数', id: '123' }});
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{color: 'red',fontSize: 14, flex: 1}}>
          <Text>这是login页面</Text>
          <Button title='去文章页面' onPress={this.goArticle}></Button>
        </View>
      </View>
    )
  }
}


export default Login;

在这里插入图片描述

*** 路由方面遗留一个问题: rn的路由能否像react-router使用高阶组件实现路由守卫?

暂时未找到解决办法, 只能根据实际的操作 在进行判断.

项目中引入iconfont

  1. 在字体图标网站上下载 字体

  2. 然后拷贝 ttf后缀的文件到 android\app\src\main\assets\fonts中 如果没有assets文件夹可以新建一个

  3. 然后 给 Text 标签 设置

     <Text style={{ fontFamily: "iconfont", color: "red" }} >{'\ue82b'}</Text>

  4. 然后记得重启项目

    在这里插入图片描述

数据共享

父子组件传值,兄弟组件传值,与react中一样

参考: https://blog.csdn.net/S3328047358/article/details/118355972

###　无关系组件传值－Mobx简单入门

react中使用redux ,在rn中官方推荐使用mobx上手难度小于redux

中文文档: https://cn.mobx.js.org/

其他参考文档: https://blog.csdn.net/xiapi3/article/details/106901684/

https://blog.csdn.net/zjscy666/article/details/107905684

  1. 安装依赖

    • mobx 核心库
    • mobx-react 方便在react中使用mobx技术的库
    • @babel/plugin-proposal-decorators 让 rn 项目支持 es7 的装饰器语法的库
    yarn add mobx mobx-react @babel/plugin-proposal-decorators

  2. 在 babel.config.js添加以下配置

      plugins: [
    ['@babel/plugin-proposal-decorators', { 'legacy': true }]
  ]

  3. /src/mobx.index.js

    import { observable, action, makeObservable, computed } from "mobx";

class RootStore {
  constructor(){
    // 最新版本的mobx 都要加这个 不然会获取不到修改后的值
    makeObservable(this)
  }
  // observable 表示数据可监控 表示是全局数据
  @observable name = "hello123";
  // action行为 表示 changeName是个可以修改全局共享数据的方法
  @action changeName(name) {
    this.name = name;
  }
  // 使用方法和name一样直接get即可
  @computed get total() {
    let newName = this.name + '最新的name值';
    return  newName;
  }
}
export default new RootStore();

  4. App.js

    import React from 'react';
import { View  } from 'react-native';
import Nav from './src/routers/nav';
// 引入store
import rootStore from "./src/mobx";
// 使用Provider使得所有组件都可访问store
import { Provider} from "mobx-react";

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render(){
    return (
        <View style={{flex: 1}}>
          <Provider rootStore={rootStore}>
            <Nav></Nav>
          </Provider>
        </View>
    )
  }
}
export default App;

  5. /src/pages/home/index.js

    import React from 'react';
import { View, Text, Button } from 'react-native';
import {inject,observer } from "mobx-react";

@inject("rootStore") // 注入 用来获取 全局数据的
@observer //  当全局发生改变了  组件的重新渲染 从而显示最新的数据
class Home extends React.Component {
  constructor(props){
    super(props)
    console.log('home组件 this.props.rootStore.name', this.props.rootStore.name);
  }
  toLogin = () => {
    this.props.navigation.navigate('login');
  }
  toChangeName = () => {
    console.log('toChangeName');
    this.props.rootStore.changeName(Date.now())
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{color: 'red',fontSize: 14, flex: 1}}>
          <Text>这是home页面rootStore的name---{this.props.rootStore.name}</Text>
          <Text>rootStore:get total---{this.props.rootStore.total}</Text>
          <Button title="去登录页面" onPress={this.toLogin}></Button>
          <Button title="修改store-name" onPress={this.toChangeName}></Button>
        </View>
      </View>
    )
  }
}

export default Home;

  6. /src/pages/articles/index.js

    import React from 'react';
import { View, Text, Button } from 'react-native';
import {inject,observer } from "mobx-react";

@inject("rootStore") // 注入 用来获取 全局数据的
@observer //  当全局发生改变了  组件的重新渲染 从而显示最新的数据
class Articles extends React.Component {
  constructor(props){
    super(props)
    console.log('Articles组件');
  }
  componentDidMount() {
    let params = this.props.route.params; //接收参数
    console.log('componentDidMount', params);
  }
  goHome = () => {
    this.props.navigation.navigate('home');
  }
  render() {
    return (
      <View style={{flex: 1}}>
      <View style={{color: 'red',fontSize: 14, flex: 1}}>
        <Text>这是Articles页面</Text>
        <Text>rootStore: name---{this.props.rootStore.name}</Text>
        <Text>rootStore:get total---{this.props.rootStore.total}</Text>
        <Button title="去首页" onPress={this.goHome}></Button>
      </View>
      </View>
    )
  }
}
export default Articles;

Mobx模块化使用

目录划分:

截图6

  1. /src/mobx/index.js

    import NumberStore from "./modules/number";
import UserStore from './modules/user';

export default {
  NumberStore,
  UserStore,
}

  2. /src/mobx/modules/number.js

    import { observable, action, makeObservable, computed } from "mobx";

class NumberStore {
  constructor(){
    makeObservable(this)
  }
  // observable 表示数据可监控 表示是全局数据
  @observable name = "hello123";
  // action行为 表示 changeName是个可以修改全局共享数据的方法
  @action changeName(name) {
    this.name = name;
  }
  // 使用方法和name一样直接get即可
  @computed get total() {
    let newName = this.name + '最新的name值';
    return  newName;
  }
}
export default new NumberStore();

  3. /src/mobx/modules/user.js

    import { observable, action, makeObservable } from "mobx";

class UserStore {
  constructor(){
    makeObservable(this)
  }
  @observable userId = "userId123456";
  @action changeUserId(id) {
    this.userId = id;
  }
}

export default new UserStore();

  4. App.js

    import rootStore from "./src/mobx";
<Provider {...rootStore}></Provider>

  5. /src/pages/home/index.js

    @inject("NumberStore", "UserStore")
@observer
class Home extends React.Component {
  constructor(props){
    super(props)
    console.log('NumberStore.name', this.props.NumberStore.name);
    console.log('UserStore', this.props.UserStore.userId);
  }
}

持久化数据存储

rn中没有localstorage, 并且早期提供的方法已无效, 需要使用第三方库实现数据的持久化存储.

react-native-storage: https://github.com/sunnylqm/react-native-storage

打包上线

安卓打包

https://www.react-native.cn/docs/signed-apk-android

按照官方文档操作即可

其他内容

ui组件库:
React Native Elements: https://reactnativeelements.com/docs/
Ant Design: https://rn.mobile.ant.design/docs/react/introduce-cn
NativeBase: https://github.com/GeekyAnts/NativeBase#6-components
动画库: https://github.com/lottie-react-native/lottie-react-native
官方推荐第三方库大全:
https://github.com/jondot/awesome-react-native
https://github.com/reactnativecn/react-native-guide

网盘下载基础参考文档:
链接: https://pan.baidu.com/s/1NAE-_nCtg_WY0LTmstEFSQ 密码: rr2c

最后: 更多内容请阅读官网入门文档模块 组件模块 及API模块

风吹@头皮凉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react native ios打包到真机
寂寞青山的博客
01-31 1898
每当在模拟器上完成了开发，都想到真机上秀秀，正好前段时候买了一个mac，哈哈有机会了。   前篇文章以android为例，这里就以ios为例，讲一下打包到iphone真机的流程。   一、前置 1.首先你得有一部iphone 2.首先react native的环境要正确安装，还未完成这一步的，请到官网或中文站查看具体流程 3.xcode等环境安装完毕 4.rn应用能在模拟器中跑
超详细 React Native 入坑使用指南，我在元宇宙等你
qq_15041931的博客
12-19 8040
前言 大家好，我是虚竹，今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境，并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码。编写丝滑般代码会再下一篇输出，包括项目实战经验总结和踩坑，如目录架构、函数式编程、React Hook 灵活运用、常见场景、开发调试、发布部署、踩坑、性能优化等等。 之前因为在我的技术群，收到群友@我，问能否出一个保姆级 React Native 搭建开发环境的教程，我说照着官方文档步骤操作即可。可惜事与愿违没那么顺利，流程上繁琐不够清晰
react-native-assets:React本机模块，允许从URL在后台下载资产，并将其持久保存到iOS上Documents文件夹中的特定目录中。 此外，您可以从该目录中删除和列出资产
04-28
React本机资产 React本机模块，允许从URL在后台下载资产，并将其持久保存到iOS上Documents文件夹中的特定目录中。 此外，您可以从该目录中删除和列出资产。 如何运行示例 npm安装 安装CocoaPods cd iOS / 吊舱安装 然后打开RCTAssetsManager.cworkspace并运行该应用程序
推荐项目：React Native Debugger - 超级实用的React Native开发调试工具
最新发布
gitblog_00037的博客
03-20 273
推荐项目：React Native Debugger - 超级实用的React Native开发调试工具 项目地址:https://gitcode.com/jhen0409/react-native-debugger React Native Debugger 是一个由开发者Jhen创建的强大工具，专门为React Native开发者提供了一整套集成的调试环境，包括JavaScript、Chrom...
react-native windows系统 红屏报assets缺失 500错误
09-30 362
指定版本，react-native是facebook用mac系统开发的，windows系统兼容较差，新版本更是问题很多， 相对老版本更加稳定 react-native init demo --version 0.55.4 assets缺失： android/app/src/main下新建assets文件夹 项目根目录执行： react-native bundle ...
React-Native项目 — 自定义字体的使用
mapbar_front的博客
01-25 933
在实际的移动端项目开发中，原生安卓和Ios自带的字体，虽然足够工整、耐看、适配大多数的场景。但是在一些特殊场合下，那些规范的字体，可能不太适合我们的app设计，而且，通常情况下，设计师的设计元素里面，本身也包含了一些第三方的特殊字体的使用，这就使得我们的项目中，有足够的能力，支持第三方的字体使用。计算机中，针对全世界的语言符号，进行了一次标准的排序，每一个专门的文字符号，都有对应的一个字符编码，我们汉语也是一样，每一个单独的汉字，都有其特定的编码。
react native 使用阿里字体图标库
好巧的博客
08-30 912
注：手动链接(react-native link)已从 react-native 0.69 中删除，以支持自动链接功能，需使用另外一个插件react-native-asset。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。将iconfont图标文件放置在src/assets/fonts。根目录新建 react-native.config.js。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
ReactNative系列之二十七加载assets目录下的图片
yeputi_WK的博客
07-31 3516
我们的应用需要是当有升级时，加载升级目录下的图片资源，否则加载assets目录下的资源。。 这里给出ReactNative加载assets目录下的方式，之前官方文档对这块写的不是很明显。。。 &lt;Image source={{uri: "asset:/yiputi_wk.png"}} style={{width: 40, height: 40}}&gt;...
react native bundle读取assets_业余时间总结了React的setState原理，有兴趣的了解下
weixin_39602976的博客
11-26 186
我唯一能确定的就是自己的无知 ——苏格拉底 (哲学之父)目标理解setState为何知道更新理解hooks的执行者原文链接： How Does setState Know What to Do?疑惑：当你在组件中调用> setState> 的时候，你认为发生了些什么？import React from 'react';import ReactDOM from 'react-dom';c...
react-native 安卓无法弹出调试菜单
liuweibing19851124的博客
06-11 1165
拷贝原有的旧项目修修改改而来的项目，开发到一半突然有一天调试菜单调不出来了，模拟机用ctrl+m调不出来，实体机摇晃也调不出来（不管摇的力度和幅度有多大都摇不出） 排查原因： 1、从增加的插件和修改原生安卓代码入手，把插件去掉，修改的原生代码还原，诶。。。发现还是不行 2、试了一下旧项目，一切正常，然后按照旧项目各种修改配置，什么package.json、gradle.properties、build.gradle（因为当时手贱把android studio升级了，这些配置都...
ReactNative从入门到原理
02-25
ReactNative是最近非常火的一个话题，介绍如何利用ReactNative进行开发的文章和书籍多如牛毛，但面向入门水平并介绍它工作原理的文章却寥寥无几。本文分为两个部分：上半部分用通俗的语言解释了相关的名词，重点介绍...
react-native-svg-asset-plugin:用于在React Native中导入SVG图像的资源插件
05-01
react-native-svg-asset插件 用于React Native的资源插件，可将SVG与Image组件一起使用。 通过在编译时生成PNG并将其传递到地铁变压器的方式进行工作。 :mobile_phone: 如果您还想将SVG图像用作应用程序启动器图标，则可能需要签出 。 安装 npm npm install --save-dev react-native-svg-asset-plugin NPM之外没有任何依赖关系。 使用进行SVG栅格化。 需要React Native版本0.57或更高版本才能工作。 不支持Expo，而是您可能要使用 。 地铁 添加'react-native-svg-asset-plugin'到清单assetPlugins在metro.config.js下的文件transformer部分。 例如; module . exports = { transformer
ReactNative入门与实战
07-22
资源名称：React Native入门与实战 源码资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
react-native ＞0.69版本 链接@ant-design/icons-react-native
张瑞东的博客
10-21 529
react-native >0.69版本 链接@ant-design/icons-react-native
RN：android设备启动后立即闪退（连启动画面都没有进去）
book_1992的专栏
02-04 1187
ios设备运行RN项目没有问题，当android设备运行时发现会立即闪退，经过排查后有两种原因造成： 权限问题，没有获取到对应权限，即调用了一些权限代码（读取联系人）等。 编译问题。 解决方法： 直接在设置里面设置应用权限后即可，但实际上应从代码逻辑上添加权限询问机制（逻辑）。 移出build目录下的所有内容，build路径：项目名/android/app/build ...
react native android 调试时图片没有显示出来
xif3681的博客
08-20 931
解决： 执行以下命令： yarn react-native bundle --platform android --dev false --entry-file index.js \ --bundle-output android/app/src/main/assets/index.android.bundle \ --assets-dest android/app/src/main/res/
【react-native】android-studio的模拟器开启reload
前端一线搬运工的博客
02-13 497
android-studio的手机模拟器不会自动刷新热更新，本文教你如何reload
React-Native 对index.android.js的修改reload之后不能显示在模拟器上
天边一朵云备胎
07-28 8322
React-Native 对index.android.js的修改reload之后不能显示在模拟器上
安卓模拟器中调试React Native，按ctrl+m不起作用的问题解决，android emulator ctrl m not working
02-06 659
按照提示，怎么按ctrl + m都不行，我也是很无语，，，，，，，，，最后终于在google上找到了答案：到这个窗口，然后输入d即可。
react-native 入门
09-02
- *2* *3* [ReactNative入门](https://blog.csdn.net/SeaState/article/details/113697867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值