RN基础学习知识(android学习笔记)

最新推荐文章于 2025-07-03 09:04:10 发布

原创最新推荐文章于 2025-07-03 09:04:10 发布 · 580 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native

reacte native 专栏收录该内容

4 篇文章

订阅专栏

本文围绕React Native开发展开，介绍了修改服务端口、新增依赖、启动项目、端口查询过滤等操作。还阐述了RN的cli命令、手势事件、组件使用，以及Promise、async&await数据请求和WebSocket使用方法，最后提及获取设备信息的方式。

修改服务端口：adb reverse tcp:8081 tcp:8081
新增：yarn add react-devtools
启动项目：react-native run-android （安卓）
端口查询：netstat -aon
过滤端口：netstat -aon |findstr "8081"

RN:{
   cli命令：{
       初始项目：react-native init '项目名称'，
       启动项目(android)：react-native run-android
   }，
   手势事件：{
       onPress:{
           触发方法：点击
       }
   }，
   组件：{
       视图滚动：{
           ScrollView:短视图滚动，horizontal可以控制滚动方向，
           FlatList:{
               特点：长列表，
               data:数据列表，
               renderItem：单条数据
           }，
           SectionList:{
               特点：可带分组title,
               sections:数据列表，
               renderItem：分组数据，
               renderSectionHeader：分组标题，
               keyExtractor：分组关键字
           }
       }
   },
   // httpClient数据请求测试地址(get)https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json
   Promise数据请求：{
       方法：Fetch,
       试例：fetch('https://mywebsite.com/endpoint/', {
               method: 'POST',
               headers: {
                   Accept: 'application/json',
                   'Content-Type': 'application/json',
               },
               body: JSON.stringify({
                   firstParam: 'yourValue',
                   secondParam: 'yourOtherValue'
       })
       .then((response) => response.json())
       .then((responseJson) => {
           return responseJson.movies;
       })
       .catch((error) => {
           console.error(error);
       }),
       method：数据请求方式，
       headers:可传递头部信息比如token，
       body:后台校验数据，或存储数据（通常需要先转换为字符串在传递）,
       catch：捕捉错误信息，
       then(01)：获取回台信息，并转换为前端所需JSON数据，
       then(01):数据请求结束回调数据
   }，
   async&await数据请求：{
       方法：Fetch,
       试例：async function getMoviesFromApi() {
       try {
           // 注意这里的await语句，其所在的函数必须有async关键字声明
           let response = await fetch(
           'https://facebook.github.io/react-native/movies.json',
           );
           let responseJson = await response.json();
           return responseJson.movies;
       } catch (error) {
           console.error(error);
       }
       },
       async:告知计算机此方法为异步请求，必要时需要挂起等待数据才可以操作数据，
       await：告知计算机需要挂起等待数据，
       try&catch：异常捕捉错误信息
   },
   WebSocket：{
       作用：端对端的全双工数据请求，
       试例：{
           // 向目标机器发起数据连接
           var ws = new WebSocket('ws://host.com/path');

           ws.onopen = () => {
           // 打开连接
           ws.send('something'); // send a message
           };

           ws.onmessage = (e) => {
           // 接受信息
           console.log(e.data);
           };

           ws.onerror = (e) => {
           // 错误提示
           console.log(e.message);
           };

           ws.onclose = (e) => {
           // 手动关闭连接
           console.log(e.code, e.reason);
           };
       }
   },
   获取设备信息：{
       Platform：{
           地址：‘react-native’
           设备类型:Platform.OS,
           设备版本：Platform.Version
       }
   }
}