16、React Native 开发进阶：网络、渲染、状态管理与长列表优化

于 2025-10-22 12:30:28 发布
阅读量18 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： React Native零崩溃实践 文章标签： React Native 离线模式 Net Info
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/f9g0h/article/details/153901279

React Native 开发进阶：网络、渲染、状态管理与长列表优化

1. 离线模式实现

在应用开发中，处理设备离线情况是提升用户体验的重要环节。我们可以使用 Net Info 作为触发器来重试失败的请求，同时也能在设备离线时管理用户的预期。具体做法是在屏幕顶部显示一个提示条，让用户在遇到功能无法使用时不会感到惊讶。

以下是实现离线提示的代码示例： 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      offline: false // 1) 添加新状态来标记网络状态
    };
  }
  componentDidMount() {
    NetInfo.addEventListener(state => { // 2) 使用 Net Info 监听网络状态，并相应地切换之前创建的状态
      if (!state.isConnected) {
        this.setState({offline: true});
      } else {
        this.setState({offline: false});
      }
    });
  }
  render() {
    return (
      <SafeAreaView style={{width: '100%', height: '100%'}}>
        <Moment/>
        {this.state.offline && // 3) 失去连接时显示离线标签
        <View style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: 60,
          backgroundColor: '#4ea4eb',
          justifyContent: 'center',
          alignItems: 'center',
          paddingTop: 20
        }}
        >
          <Text style={{
            fontSize: 16,
            fontWeight: "bold",
            color: 'white'
          }}>No Network</Text>
        </View>
        }
      </SafeAreaView>
    );
  }
}
export default App;

上述代码的具体步骤如下：
1. 添加新状态 ：在 App 组件的 state 中添加 offline 状态，用于标记网络状态。
2. 监听网络状态 ：使用 NetInfo.addEventListener 监听网络状态的变化，并根据连接状态更新 offline 状态。
3. 显示离线标签 ：在 render 方法中，根据 offline 状态决定是否显示离线提示条。

2. 渲染机制回顾

React 使用虚拟 DOM 树（VDOM 树）来促进渲染。 render() 方法返回的是一个蓝图（元素），React 运行时会使用它来构建 VDOM。当进行更新时，React 会在 VDOM 树上使用差异算法（协调）来收集更改，然后再进行重新渲染。

差异算法会逐层比较虚拟 DOM 树：
- 如果新旧版本的根节点类型不同，则卸载并重新挂载子树。
- 如果根节点类型相同，则使用新的属性更新节点。

需要注意的是， setState() 操作比较耗时，不当使用可能会触发整个 VDOM 树的过度重新渲染。为了提高差异算法的效率，React 提供了以下三种主要方法：
| 方法 | 说明 |
| ---- | ---- |
| shouldComponentUpdate() | 让你有机会决定组件及其子树是否应该在渲染事件中更新，可减少参与差异算法的节点数量，但可能会意外阻止子组件的有效更新。 |
| 纯组件（ PureComponent ） | 通过浅比较传入的所有属性，避免不必要的重新渲染。 |
| Redux | 解决跨 VDOM 树通信的难题，使事件能直接传递到特定组件，减少差异算法的比较范围。 |

此外，在使用 map() 或 FlatList 渲染列表时，建议为列表中的每个组件添加 key ，以避免不必要的重新渲染。但要注意，不要使用列表索引作为 key ，因为列表的突变可能会改变相同条目的 key 。

3. Redux 状态管理

Redux 是一个常用的全局状态管理框架，它解决了跨 VDOM 树通信的基本难题。以下是 Redux 的基本概念和工作原理：
- 基本概念 ：
- store ：管理全局状态，与一个或多个 reducer 关联。
- reducer ：根据 action 修改 store 中的状态。
- dispatcher ：将 action 发送到 reducer 。
- action ：包含执行更改所需的所有信息（ payload ）。
- subscriber ：订阅 store 的变化。

  • 工作原理 ：
  • Redux 遵循不可变原则，即不直接修改全局状态的内容，而是创建新的状态实例并将修改后的版本设置回 store 。
  • 建议保持 Redux 状态扁平化，使状态尽可能直接供 UI 使用。

下面通过一个点赞功能的案例来展示 Redux 的使用：
1. 安装 Redux ： 

npm install redux
npm install react-redux
  1. 创建 store 和 reducer ： 
import { createStore, combineReducers } from 'redux';
const INITIAL_STATE = {
  feeds: [], // 定义初始状态
};
const feedsReducer = (state = INITIAL_STATE, action) => {
  let newState = state;
  switch (action.type) {
    case 'UPDATE_FEEDS':
      if (!action?.payload?.feeds) {
        console.error(
          'action?.payload?.feeds is null in [UPDATE_FEEDS]'
        );
        return state;
      }
      newState = {
        ...state,
        feeds: action?.payload?.feeds
      };
      break;
    case 'LIKE':
      // 处理点赞逻辑
      if (action?.payload?.feedIndex === undefined ||
          action?.payload?.feedIndex === null ||
          action?.payload?.feedIndex < 0 ||
          action?.payload?.feedIndex >= state.feeds.length
      ) {
        console.error('action?.payload?.feedIndex is not valid in [LIKE]:' + action?.payload?.feedIndex);
        return state;
      }
      newState = {
        ...state,
        feeds: state.feeds.map((feed, index) => {
          if (index === action.payload.feedIndex) {
            feed.meta.numOfLikes += 1;
            feed.meta.liked = true;
            feed.meta = Object.assign({}, feed.meta);
            return Object.assign({}, feed);
          } else {
            return feed;
          }
        })
      };
      break;
    default:
      break;
  }
  return newState;
};
export default createStore(combineReducers({
  moment: feedsReducer // 定义 reducer 及其根对象
}));
  1. 定义 action 并连接 dispatch ： 
const mapDispatchToProps = dispatch => (
  bindActionCreators({
    updateFeeds: (feeds) => {
      return {
        type: 'UPDATE_FEEDS',
        payload: { feeds }
      }
    },
    like: (feedIndex) => {
      return {
        type: 'LIKE',
        payload: { feedIndex }
      }
    }
  }, dispatch)
);
  1. 实现点赞功能 ： 
export default function withMetaAndControls(Feed) {
  class ElemComponent extends React.Component {
    render() {
      return (
        <View style={[
          {...this.props.style}, styles.commonPadding
        ]}>
          <View style={styles.metaContainer}>
            <LoomingImage
              style={styles.avatar}
              source={{uri: this.props.item.meta.avatarUri}}
            />
            <View style={styles.infoContainer}>
              <Text style={styles.userName}>
                {this.props.item.meta.name}
              </Text>
              <Text style={styles.date}>
                {this.props.item.meta.date}
              </Text>
            </View>
          </View>
          <Feed {...this.props} ref={this.props.innerRef}/>
          <View style={styles.controlContainer}>
            <TouchableOpacity
              disabled={this.props.item.meta.liked}
              style={{flex: 1}}
              onPress={
                this.props.like.bind(this, this.props.feedIndex)
              }
            >
              <NumberedWidget
                type={
                  this.props.item.meta.liked ?
                  widgetTypes.LIKED :
                  widgetTypes.LIKE
                }
                number={this.props.item.meta.numOfLikes}
              />
            </TouchableOpacity>
            <NumberedWidget
              style={{flex: 1}}
              type={widgetTypes.COMMENT}
              number={this.props.item.meta.numOfComments}
            />
            <NumberedWidget
              style={{flex: 1.5}}
              type={widgetTypes.SHARE}
              number={this.props.item.meta.numOfShares}
            />
            <Widget type={widgetTypes.MORE} />
          </View>
        </View>
      )
    }
  }
  const mapDispatchToProps = dispatch => (
    bindActionCreators({
      like: (feedIndex) => {
        return {
          type: 'LIKE',
          payload: { feedIndex }
        }
      }
    }, dispatch)
  );
  const ConnectedElemComponent = connect(
    null, mapDispatchToProps
  )(ElemComponent);
  return React.forwardRef((props, ref) => 
    <ConnectedElemComponent
      innerRef={ref} {...props}
    />
  );
}
4. 长列表优化

在 React Native 中，长列表不再是一个难题，官方提供的 FlatList 组件可以高效地处理长列表。其基本原理是始终渲染一个比视口大但比整个列表小得多的区域，从而在滚动时以最小的内存开销给人一种完整列表已完全渲染的错觉。

为了进一步优化 FlatList 的性能，可以考虑以下基本优化点：
- 添加 key ：为列表中的每个组件添加 key ，减少差异算法的开销。
- 使用 shouldComponentUpdate 或纯组件 ：避免整个列表的重新渲染。

如果 FlatList 最终仍无法满足性能要求，可以考虑使用第三方组件，如 RecyclerListView 。

综上所述，通过合理运用离线模式处理、优化渲染机制、使用 Redux 进行状态管理以及优化长列表组件，可以显著提升 React Native 应用的性能和用户体验。

React Native 开发进阶：网络、渲染、状态管理与长列表优化

5. 离线模式与 Redux 的综合应用场景分析

在实际的 React Native 应用开发中，离线模式和 Redux 状态管理往往会结合使用，以提供更稳定和流畅的用户体验。以下是一个可能的综合应用场景分析：

场景描述

假设我们正在开发一个社交类应用，用户可以浏览动态、点赞动态等操作。当用户处于离线状态时，我们希望能够提示用户当前网络状况，并且允许用户对已缓存的动态进行点赞操作，待网络恢复后，将离线期间的点赞操作同步到服务器。

实现步骤
  1. 离线模式提示 ：使用前面提到的 Net Info 监听网络状态，在离线时显示提示条。
  2. Redux 状态管理 ：使用 Redux 管理动态列表和点赞状态。
  3. 离线点赞处理 ：当用户在离线状态下点赞动态时，将点赞操作记录在 Redux 的状态中。
  4. 网络恢复同步 ：当网络恢复时，将离线期间的点赞操作发送到服务器进行同步。

以下是一个简化的代码示例，展示了如何在离线状态下记录点赞操作： 

// 假设我们已经有了 Redux 的 store 和 reducer
// 在 reducer 中添加离线点赞操作的处理逻辑
const feedsReducer = (state = INITIAL_STATE, action) => {
  let newState = state;
  switch (action.type) {
    case 'UPDATE_FEEDS':
      // 处理动态更新逻辑
      break;
    case 'LIKE':
      if (action?.payload?.feedIndex === undefined ||
          action?.payload?.feedIndex === null ||
          action?.payload?.feedIndex < 0 ||
          action?.payload?.feedIndex >= state.feeds.length
      ) {
        console.error('action?.payload?.feedIndex is not valid in [LIKE]:' + action?.payload?.feedIndex);
        return state;
      }
      newState = {
        ...state,
        feeds: state.feeds.map((feed, index) => {
          if (index === action.payload.feedIndex) {
            feed.meta.numOfLikes += 1;
            feed.meta.liked = true;
            feed.meta = Object.assign({}, feed.meta);
            return Object.assign({}, feed);
          } else {
            return feed;
          }
        })
      };
      break;
    case 'OFFLINE_LIKE':
      // 处理离线点赞操作
      if (action?.payload?.feedIndex === undefined ||
          action?.payload?.feedIndex === null ||
          action?.payload?.feedIndex < 0 ||
          action?.payload?.feedIndex >= state.feeds.length
      ) {
        console.error('action?.payload?.feedIndex is not valid in [OFFLINE_LIKE]:' + action?.payload?.feedIndex);
        return state;
      }
      newState = {
        ...state,
        offlineLikes: [
          ...state.offlineLikes,
          action.payload.feedIndex
        ]
      };
      break;
    default:
      break;
  }
  return newState;
};

// 在组件中处理离线点赞操作
export default function withMetaAndControls(Feed) {
  class ElemComponent extends React.Component {
    handleLike = (feedIndex) => {
      if (!this.props.isConnected) {
        // 离线状态下记录点赞操作
        this.props.offlineLike(feedIndex);
      } else {
        // 在线状态下正常点赞
        this.props.like(feedIndex);
      }
    }

    render() {
      return (
        <View style={[
          {...this.props.style}, styles.commonPadding
        ]}>
          <View style={styles.metaContainer}>
            <LoomingImage
              style={styles.avatar}
              source={{uri: this.props.item.meta.avatarUri}}
            />
            <View style={styles.infoContainer}>
              <Text style={styles.userName}>
                {this.props.item.meta.name}
              </Text>
              <Text style={styles.date}>
                {this.props.item.meta.date}
              </Text>
            </View>
          </View>
          <Feed {...this.props} ref={this.props.innerRef}/>
          <View style={styles.controlContainer}>
            <TouchableOpacity
              disabled={this.props.item.meta.liked}
              style={{flex: 1}}
              onPress={() => this.handleLike(this.props.feedIndex)}
            >
              <NumberedWidget
                type={
                  this.props.item.meta.liked ?
                  widgetTypes.LIKED :
                  widgetTypes.LIKE
                }
                number={this.props.item.meta.numOfLikes}
              />
            </TouchableOpacity>
            <NumberedWidget
              style={{flex: 1}}
              type={widgetTypes.COMMENT}
              number={this.props.item.meta.numOfComments}
            />
            <NumberedWidget
              style={{flex: 1.5}}
              type={widgetTypes.SHARE}
              number={this.props.item.meta.numOfShares}
            />
            <Widget type={widgetTypes.MORE} />
          </View>
        </View>
      )
    }
  }

  const mapDispatchToProps = dispatch => (
    bindActionCreators({
      like: (feedIndex) => {
        return {
          type: 'LIKE',
          payload: { feedIndex }
        }
      },
      offlineLike: (feedIndex) => {
        return {
          type: 'OFFLINE_LIKE',
          payload: { feedIndex }
        }
      }
    }, dispatch)
  );

  const ConnectedElemComponent = connect(
    null, mapDispatchToProps
  )(ElemComponent);

  return React.forwardRef((props, ref) => 
    <ConnectedElemComponent
      innerRef={ref} {...props}
    />
  );
}
6. 渲染优化与长列表优化的协同工作

渲染优化和长列表优化在 React Native 应用中是相辅相成的，它们的协同工作可以进一步提升应用的性能。以下是一些协同工作的建议和示例：

协同建议
  1. 合理使用 key ：在长列表中为每个组件添加 key ，同时在渲染优化中也遵循 key 的使用原则，确保列表项的稳定渲染。
  2. 结合 shouldComponentUpdate 和纯组件 ：在长列表组件中使用 shouldComponentUpdate 或纯组件，避免不必要的重新渲染，同时在整个应用的渲染过程中也合理应用这些优化方法。
  3. 按需加载和渲染 ：结合长列表的按需加载机制和渲染优化，只在需要时渲染组件，减少内存开销。
示例代码 
import React, { Component } from 'react';
import { FlatList, Text, View } from 'react-native';

// 纯组件示例
class FeedItem extends React.PureComponent {
  render() {
    return (
      <View style={{ padding: 10 }}>
        <Text>{this.props.item.title}</Text>
      </View>
    );
  }
}

// 长列表组件
class FeedList extends Component {
  renderItem = ({ item }) => {
    return <FeedItem item={item} />;
  }

  keyExtractor = (item, index) => index.toString();

  render() {
    return (
      <FlatList
        data={this.props.data}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
      />
    );
  }
}

export default FeedList;
7. 优化策略总结

为了方便开发者更好地掌握 React Native 应用开发中的优化策略，以下是一个总结表格：

优化领域 优化方法 说明
离线模式 使用 Net Info 监听网络状态 显示离线提示，管理用户预期
渲染机制 shouldComponentUpdate() 决定组件及其子树是否更新，减少差异算法节点数量
纯组件（ PureComponent ） 浅比较属性，避免不必要的重新渲染
Redux 解决跨 VDOM 树通信，减少差异算法比较范围
为列表组件添加 key 避免列表更新时的不必要重新渲染
Redux 状态管理 合理设计 store 和 reducer 遵循不可变原则，保持状态扁平化
避免滥用 Redux 仅管理多个实体更改或监听的全局状态
长列表优化 为列表项添加 key 减少差异算法开销
使用 shouldComponentUpdate 或纯组件 避免整个列表重新渲染
考虑第三方组件 如 RecyclerListView ，提升性能

通过综合运用这些优化策略，开发者可以打造出高性能、稳定且用户体验良好的 React Native 应用。在实际开发中，需要根据具体的应用场景和需求，灵活选择和组合这些优化方法，不断优化应用的性能。

8. 未来发展趋势展望

随着 React Native 技术的不断发展，未来在离线模式、渲染优化、状态管理和长列表处理等方面可能会有以下发展趋势：

离线模式
  • 更智能的离线数据缓存和同步机制 ：能够自动识别重要数据进行缓存，并在网络恢复时高效同步，减少用户等待时间。
  • 支持更多离线功能 ：如离线编辑、离线搜索等，提升用户在离线状态下的使用体验。
渲染优化
  • 更高效的差异算法 ：进一步减少渲染开销，提升渲染速度。
  • 与新的渲染技术结合 ：如 WebGL 等，实现更复杂和炫酷的渲染效果。
状态管理
  • 更简洁和强大的状态管理框架 ：降低开发成本，提高开发效率。
  • 更好的与其他技术集成 ：如 GraphQL 等，实现更高效的数据获取和状态管理。
长列表处理
  • 更智能的长列表组件 ：能够自动根据设备性能和数据量进行优化，提供更好的性能表现。
  • 支持更多交互和动画效果 ：在长列表中实现更丰富的用户交互和动画效果。

开发者需要密切关注这些发展趋势，不断学习和掌握新的技术和方法，以适应未来 React Native 应用开发的需求。

React Native Expo全栈开发：性能优化与调试技巧
AI天才研究院
06-24 1556
React Native（以下简称RN）作为跨平台开发的“顶流”框架，凭借“一次编写，多端运行”的特性，让无数开发者用JavaScript（或TypeScript）就能开发iOS和Android应用。而Expo作为RN的“增强工具链”，通过封装复杂的原生配置、预集成常用模块（如相机、定位），进一步降低了开发门槛。但随着应用功能的复杂化，开发者常遇到“滑动卡顿”“启动变慢”“内存飙升”等问题。本文聚焦Expo全栈开发场景。
6、React Native 开发进阶：组件拆分、Props 使用与跨平台应用构建
最新发布
gaochao的博客
10-12 23
本文深入讲解了React Native开发中的核心技巧，包括如何通过组件拆分优化代码结构、使用Props实现数据传递与组件复用、利用map函数动态渲染列表，以及构建跨平台应用的关键步骤。结合TransactionCard和MGA两个实际案例，详细展示了组件层级设计、数据流动机制和开发流程，并强调了代码可读性、可维护性及跨设备兼容性的重要性，为开发者提供了从基础到进阶的完整实践指南。
ReactNative进阶（一）：ReactNative 学习资料汇总(1)
2401_84433924的博客
04-27 444
前端资料汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
ReactNative进阶（四）：ReactNative 原理剖析之JS 层渲染 diff 算法_react native匹配dom节点
2401_84411323的博客
04-29 1074
整个diff算法，都是基于的，那什么是呢？本质是用来模拟DOM的JS对象。一般含有标签名（tag）、属性（props）和子元素对象（children）三个属性，不同框架对属性的命名会有点差别，但表达的意思是一致的。例如：对于以下一段代码，怎么映射成对应的呢？
ReactNative进阶（十二）：本地存储 AsyncStorage 及 Realm 使用
IT全栈 华强工作室
04-26 4461
前言 数据持久化一直都是软件开发中重要的一个环节，几乎所有的应用都具备这一项功能；那什么是数据持久化呢？—— 说白了就是数据的本地化存储，将数据存储到本地，在需要的时候进行调用。 本文介绍两种在 React-Native 中比较常用的存储方式：AsyncStorage及Realm。 AsyncStorage：官方使用的存储方式，类似于 iOS 中的 NSUserDefault ，区别在于，AsyncStorage 只能存储字符串键值对，而 NSUserDefault 可以存储字符串和number。 Rea
2024年最全ReactNative进阶（四十九）project，2024年最新web前端面试流程图
2401_84411018的博客
05-14 427
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
react-native学习----------进阶指南
难得糊涂
11-28 1179
组件和API(第三方组件也很有用) React Native 提供了一些内置的组件。你可以在网站的左侧看到组件的完整列表。如果你不知道从哪看起，那么可以先看一下下面这个简单的分类：需要说明的是，你不会被局限在这些内置组件上。React Native 是大开源社区的作品，所以你还可以在 github 或是 npm 上搜索到带有react native关键字的大量的第三方组件。 基础组件 交互控...
React Native实战进阶
09-13
本书深入讲解React Native核心原理与实战技巧，涵盖组件架构、Flexbox布局、状态管理、网络编程与渲染优化。通过真实项目‘Manyf ace’贯穿全书，帮助开发者构建高性能、零崩溃的跨平台应用。内容涉及虚拟DOM、生命...
React Native进阶指南：状态管理与数据流实战解析，专家带你飞
[React Native进阶指南：状态管理与数据流实战解析，专家带你飞](https://www.elitebrains.com/uploads/blog/flux_redux_mobx_image2.png) # 1. React Native状态管理与数据流概述 ## 1.1 React Native状态管理的...
React-Native进阶_7.TextInput实现搜索功能
08-03
前面使用TabBar 实现了底部tab标签，通过stackNavigator 实现了页面跳转，接下来，使用TextInput 来实现一个搜索功能。 TextInput 属性比较多，不一一介绍，具体可以百度搜索或者结合源码。
ReactNative进阶（一）：ReactNative 学习资料汇总
IT全栈 华强工作室
05-07 2765
序 目前主流的移动跨平台技术方案大体可以分为三类， 使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序； 使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和轻快应用； 使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，相比较React Native和Flutter，React Native和Flu.
ReactNative进阶之react-native-storage的使用及封装
热门推荐
ZACH_ZHOU的博客
05-23 2万+
本篇博客将带大家展开reactnative中关于数据持久化存储的学习。其中涉及到了nodejs的语法的相关知识，也稍做介绍。好了，废话不多说。在androind中数据的持久化存储用的比较多的就是shareperferce，通过shareperferce会在手机创建一个xml文件，其中数据就是已key-value的键值对存储的。reactnative方式也是相似的，不过他的存储数据结构是json串。
React Native0.61进阶之图片
嘻哈包袱铺 专栏
11-07 611
静态图片资源 React Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它： <Image source={require('./my-icon.png')} /> 图片文件的查找会和 JS 模块的查找方式一样。在上面的这个例子里，是哪个组件引用了这个...
ReactNative进阶（五）：Mac 通过 .bash_profile 文件配置环境变量
IT全栈 华强工作室
06-04 2206
，用于设置系统级的环境变量和启动程序，在这个文件下的配置信息会对所有用户生效。当用户登录（login）时，文件会被执行，并从。这个文件同样也可以用于配置环境变量和启动程序，但只针对单个用户有效。文件中添加环境变量，因为在这个文件中添加的设置会对所有用户起作用。也会在用户登录（login）时生效，也可以用于设置环境变量。，该文件是一个用户级的设置，可以理解为某一个用户的。只有单一用户有效，文件存储位于。（如果只是查看，直接使用。如文件不存在，则新建。目录的配置文件中查找。只会对当前用户生效。
React-Native进阶_6.导航 Naviagtion传递数据并展示
编程之美
08-01 985
接着上面 Navigation 继续学习传递数据给下一个页面 onPress={() => this.props.navigation.navigate('Detail',{info:movie.title,movie:movie})} 这样，跳转到详情页，可以传递 电影标题 movie.title 和电影对象 movie 在 MovieDetail 页面中 可以拿到这些数据 this.props.navigation.state.params.movie　就可以拿到　 电影对象 movie 接下来拿到电
ReactNative学习笔记（二）基础进阶
weixin_33736649的博客
03-15 122
一个最简单的HelloWorld页面 先不多解释，直接上代码： import React, { Component } from 'react'; import {AppRegistry, StyleSheet, Text, View} from 'react-native'; export default class helloworldComponent extends Component ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值