当前位置： 首页 > news >正文

react-native 学习心得

news 来源：原创 2024/5/20 13:03:18

需要的工具

Android Studio：这个是针对安卓原生开发的编译工具
genymotion :这个是安卓模拟器
Xcode :这个是iOS开发的编译工具
webstorm ：一个自己喜欢的代码编译工具（当然你也可以选择自己喜欢的编译工具，个人比较喜欢这个）

推荐学习网站

  1. react native 中文网站 ：环境配置和常用组件，api 都很详细
  2. RN路由react navigation ：你也可以不使用这个，但是这个是我知道的比较完善的路由导航组件
  3. debug工具 ：debug可以使用自带的那个工具，这个也是一个在开发中的工具，在原有的基础上添加了一些功能，可点击进去了解下
  4. js.coach组件库 ：组件很丰富 ，方便查找
  5. 前端一部分中文文档目录 ：突然打开可能会晃眼，而且感觉页面做的很盗版，但是东西还是很不错的

推荐安装的google插件

打开翻墙工具，直接在google商店里面搜索名称即可
1，JSON-handle:帮助方便前端人员看接口数据
2，FeHelper:这个是很万能的，正则表达式，json转换，取色等等
3，Clip to Evernote:这个看是可以将当前的页面保存到印象笔记上面，如果你没有使用印象笔记就不推荐了

说在前面

我接触两周的感觉是react native和react的差不多，生命周期，组件的使用，接口的调用，都还是和react差不多，
但是标签的使用，样式的写法，和路由的使用却不一样。

目录结构介绍

页面 标签 样式 组件 路由 接口调用介绍

（一）页面 ，标签和样式

学过react的小伙伴可能更容易上手，新建页面和react的一样，
不一样的是：
1,react一大部分标签里面都是可以直接写文本的，但是这里除了Text标签可以直接写文本，其他的需要在其属性里面写文本，
比如Button，有titie属性，目前我知道的是 ，所有的标签都是从react native里面引用（自定义组件除外）。
2, 样式是对象的形式，这个可以参看react native官网，
代码如下

（二）组件

组件和其他的组件使用方法一样，不管是vue，还是react,直接引入传值，代码如下：
组件：
import React, {PureComponent} from "react";
import { Text, } from "react-native";

export default class TestOne extends PureComponent {

  render() {
    return (
      <Text>这是一个组件</Text>
    );
  }
}


复制代码
在父组件的使用方法是:
import React, { PureComponent } from "react";
import { Button, StatusBar, Text, View,StyleSheet } from "react-native";
import TestOne from '../../components/TestOne';
export default class extends PureComponent {
  render() {
    return (
      <View>
      <TestOne/>
      </View>
    );
  }
}

复制代码

（三）路由

配置，上面有介绍，我使用的路由是参react navigation,详细介绍还是去看文档；
我在页面文件夹下面创建了一个index的文件，作为页面路由的配置，目录结构如下

代码如下： 其他的请参考导航的接口api
import React from "react";
import {
  createStackNavigator,
  createSwitchNavigator,
  createBottomTabNavigator
} from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import HomeScreen from "./Home";
import DetailsScreen from "./Details";
import ModalScreen from "./Modal";
import RegisterScreen from "./Auth/RegisterScreen";
import SignInScreen from "./Auth/SignInScreen";
import SettingsScreen from "./Settings";
import UserSetScreen from "./Settings/UserSetScreen";


const Tab = createBottomTabNavigator( // 这个是tab切换形式的路由
  {
    Home: HomeScreen,
    Settings: SettingsScreen
  },
  {
    navigationOptions: ({ navigation }) => ({  // 这里是设置tab的样式，图片 类似于小程序
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-home`;
        } else if (routeName === "Settings") {
          iconName = `ios-settings`;
        }

        return <Ionicons name={iconName} size={25} color={tintColor}/>;
      }
    }),
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
);

const MainStack = createStackNavigator(  // 普通的页面跳转 ，类似于href
  {
    Tab: {    //  这些是可以简写的
      screen: Tab
    },
    Details: DetailsScreen,  //  这个就是简写的形式Details是路由名称，DetailsScreen是页面
    SetUser: {
      screen: UserSetScreen
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: "#f4511e"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack
    },
    MyModal: {
      screen: ModalScreen
    }
  },
  {
    mode: "modal",     //  设置页面跳转的方式 从底部滑入
    headerMode: "none"
  }
);

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  RegisterScreen: RegisterScreen
});

const AppNavigator = createSwitchNavigator({  // 不可以回退的页面 类似于 replace
  Auth: AuthenticationNavigator,
  Root: RootStack
});

export default AppNavigator;


复制代码
路由配置好了，接下来看如何使用
import React, { PureComponent } from "react";
import { Button, View, Text, StatusBar } from "react-native";

export default class SignInScreen extends PureComponent {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <StatusBar barStyle={"dark-content"} />  // 头部样式设置
         // 页面跳转 这只是一种方式，其他的还有back push 等
        <Button
          style={sty.title}
          title="Go Sign in"
          onPress={() => this.props.navigation.navigate("Root")} 
        />
        <Button
          title="Go Register"
          onPress={() => this.props.navigation.navigate("RegisterScreen")}
        />
      </View>
    );
  }
}
const sty=  StyleSheet.create({
  title:{
    color:'red',
  }
})


复制代码
路由是可以专递值的 路由的第二个参数是个对象，里面可以用来传递一些值，具体使用如下代码
// 这个是home页面
import React, { PureComponent } from "react";
import { Button, StatusBar, Text, View,StyleSheet } from "react-native";
import TestOne from '../../components/TestOne';
export default class extends PureComponent {
 state = {
   count: 0
 };
 render() {
   return (
     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
       <StatusBar barStyle={"light-content"} />
       <Text>主页面home</Text>
     <TestOne/>
       <Text>Count: {this.state.count}</Text>
       <Button
         title="去详情页面 detail"
         onPress={() => {  //  点击按钮的时候传递了一些值 
           this.props.navigation.navigate("Details", {   
             itemId: 86,
             otherParam: "First Details",
             onChangeTitle: 'title'
           });
         }}
       />
     </View>
   );
 }
}




// 这个是详情页面



import React, {PureComponent} from "react";
import { Button, View, Text, StatusBar } from "react-native";

export default class extends PureComponent {
 static navigationOptions = ({ navigation }) => {  
 state = {
   count: 0
 };

 render() {
   const { params } = this.props.navigation.state;
   const itemId = params ? params.itemId : null;
   const otherParam = params ? params.otherParam : null;

   return (
     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
       <StatusBar barStyle={"dark-content"} />
       <Text>Details Screen</Text>
       <Text>itemId: {JSON.stringify(itemId)}</Text>
       <Text>otherParam: {JSON.stringify(otherParam)}</Text>
     </View>
   );
 }
}


复制代码
路由的使用还有很多 ，建议去看文档，上面有推荐，谢谢

（四）接口调用

接口调用和react 调用一样，封装好request的方法，这里就不说了，可以参看github代码

（五） 未完待续，谢谢！！

相关文章：

  • 使用WPF技术模拟手机界面
  • 移动端常用的 UI 库
  • [转] 三种方法实现js跨域访问
  • 20172328 2018-2019《Java软件结构与数据结构》第一周学习总结
  • 14.spark mllib之快速入门
  • MySql文件
  • findbugs静态代码分析工具使用教程
  • 【unity实用技能】记一次失败的蓝图接口开发失败经验
  • SQLServer之索引简介
  • 如何优雅地关闭Go channel
  • 13、【分类模块管理】——查询节点和递归查找功能开发
  • 初识Mpvue
  • mongodb基础（1）
  • 不学无数——个人搭建的博客已经好了，欢迎访问
  • (五)IO流之ByteArrayInput/OutputStream
  • #Java异常处理
  • 【附node操作实例】redis简明入门系列—字符串类型
  • 0x05 Python数据分析，Anaconda八斩刀
  • 8年软件测试工程师感悟——写给还在迷茫中的朋友
  • Angular4 模板式表单用法以及验证
  • express.js的介绍及使用
  • gf框架之分页模块(五) - 自定义分页
  • Js基础知识（四） - js运行原理与机制
  • Python打包系统简单入门
  • React系列之 Redux 架构模式
  • SQLServer插入数据
  • Three.js 再探 - 写一个跳一跳极简版游戏
  • XML已死 ？
  • 阿里云前端周刊 - 第 26 期
  • 程序员最讨厌的9句话，你可有补充？
  • 聊一聊前端的监控
  • 白色的风信子
  • （12）目标检测_SSD基于pytorch搭建代码
  • （ZT）一个美国文科博士的YardLife
  • (附源码)计算机毕业设计SSM智慧停车系统
  • （十五）devops持续集成开发——jenkins流水线构建策略配置及触发器的使用
  • （转）大道至简，职场上做人做事做管理
  • .gitignore文件—git忽略文件
  • .java 指数平滑_转载：二次指数平滑法求预测值的Java代码
  • .NET C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
  • .Net Web项目创建比较不错的参考文章
  • .NET版Word处理控件Aspose.words功能演示：在ASP.NET MVC中创建MS Word编辑器
  • .NET关于 跳过SSL中遇到的问题
  • .Net中wcf服务生成及调用
  • .Net中间语言BeforeFieldInit
  • .net最好用的JSON类Newtonsoft.Json获取多级数据SelectToken
  • ：“Failed to access IIS metabase”解决方法
  • [20171106]配置客户端连接注意.txt
  • [C#]winform部署yolov5-onnx模型
  • [c#基础]DataTable的Select方法
  • [c++] 单例模式 + cyberrt TimingWheel 单例分析
  • [C++]C++基础知识概述
  • [C++]类和对象(中)
  • [C++]指针与结构体
  • [CISCN 2023 初赛]go_session