React Native跨平台开发学习笔记

Pulseum

已于 2022-02-27 17:55:47 修改

阅读量2.7k

点赞数

分类专栏： react-native 文章标签： react native 学习 javascript

于 2022-02-27 17:08:54 首次发布

本文链接：https://blog.csdn.net/qq_53472371/article/details/123108925

版权

本文详细介绍了React Native的跨平台开发，包括环境搭建、组件学习如ScrollView、Button、Image、TextInput等，以及FlatList的使用、导航组件stackNavigator和DrawerNavigator的实现，还有项目实践中的组件自定义和数据获取。

摘要由CSDN通过智能技术生成

App的分类（按开发方式）

大致可以分为这3种：

native app（原生app：ios或安卓）原生应用程序
原生应用程序外观和运行起来（性能）是最佳的。可以访问本地资源，开法成本高。发布审核周期长。
web app/ H5 app （APIclound）H5应用程序
整体量级轻，开发成本低，基于浏览器，可以跨平台使用。资源都在远程服务器。网速受到限制时，交互效果也会受到限制，页面跳转费力，不稳定感更强。无法操作很多手机原生设备，摄像头，麦克风，不支持多点触控等。
hybrid app（混合app）混合应用程序
集原生应用程序和HTML5应用程序的优点（及缺点）于一体。速度快，跨平台。

ReactNative简介

React Native使你只使用JavaScript也能编写原生移动应用。它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。

React Native最终产品很贴近移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。所以有React基础,那么学习RN会非常轻松。

ReactNative中文官网： https://reactnative.cn/

ReactNative学习

搭建环境

创建项目
npx react-native init LifeServices --version 0.55.4
LifeServices为项目名称
打包并运行项目
yarn react-native run-android

自定义组件

代码笔记：

index.js：

import {
    AppRegistry } from 'react-native';
import App from './components/App1';

AppRegistry.registerComponent('AwesomeProject', () => App);

app.js：

// 1、自定义组件

// 1) 引入核心模块
import React, {
    Component } from "react"
import {
    View, Text, StyleSheet } from "react-native"

// 2) 创建并导出组件
export default class App1 extends Component {
   
  render() {
   
    return (
      <View style={
   styles.container}>
        <Text style={
   styles.txt1}>nihoa</Text>
      </View>
    )
  }
}

// 3) 样式代码
const styles = StyleSheet.create({
   
  txt1: {
   
    color: "red"
  },
  container: {
   
    backgroundColor: "#ccc"
  }
})

实现效果：
002

View组件 - 初步认识ScrollView组件

代码笔记：

app.js：

// 2、 View组件 初步认识ScrollView组件
// 1) 引入核心模块
import React, {
    Component } from "react"
import {
    View, Text, StyleSheet, ScrollView } from "react-native"

// 2) 创建并导出组件
export default class App2 extends Component {
   
  render() {
   
    return (
      <View style={
   styles.container}>
        {
   /* View组件默认情况下超出的内容不可见 */}
        {
   /* 把ScrollView加载需要出现滚动条的盒子内部，默认出现的是竖向滚动条  如果要横向添加horizontal属性 <ScrollView horizontal> */}
        <ScrollView>
          <Text style={
   styles.txt1}>易烊千玺！！！易烊千玺！！！易烊千玺！！！易烊千玺！！！易烊千玺！！！易烊千玺！！！易烊千玺！！！易烊千玺！！！易烊千玺！！！易烊千玺！！！文字超出不显示！！要用到ScrollView组件！！！</Text>
        </ScrollView>
      </View>
    )
  }
}

// 3) 样式代码
const styles = StyleSheet.create({
   
  txt1: {
   
    color: "red"
  },
  container: {
   
    width: 100,
    height: 100,
    backgroundColor: "pink"
  }
})

实现效果：
003

获取屏幕的宽高和像素比

代码笔记：

app.js：

// 2、 View组件 初步认识ScrollView组件
import React, {
    Component } from "react"
import {
    View, Text, Dimensions } from "react-native"

const {
    width, height, scale } = Dimensions.get('window')

export default class App3 extends Component {
   
  render() {
   
    return (
      <View>
        {
   /* 获取的是可用范围的宽高 */}
        <Text>屏幕的宽度是：{
   width}</Text>
        <Text>屏幕的高度是：{
   height}</Text>
        <Text>屏幕的像素比是：{
   scale}</Text>
      </View>
    )
  }
}

实现效果：
004

练习题

书写一个满屏的盒子 && 书写一条最细的线

代码笔记：

app.js：

// 4、练习题
// 1) 书写一个满屏的盒子
// 2) 书写一条最细的线（高度最小）
import React, {
    Component } from "react"
import {
    View, Text, Dimensions, StyleSheet } from "react-native"

const {
    width, height, scale } = Dimensions.get('window')

export default class App3 extends Component {
   
  render() {
   
    return (
      <View style={
   styles.container}>
        {
   /* 获取的是可用范围的宽高 */}
        <Text>屏幕的宽度是：{
   width}</Text>
        <Text>屏幕的高度是：{
   height}</Text>
        <Text>屏幕的像素比是：{
   scale}</Text>
        <View style={
   styles.line}></View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
   
  container: {
   
    // width,
    // height,
    // width: "100%",
    // height: "100%",
    flex: 1,
    backgroundColor: "pink"
  },
  line: {
   
  	// 高 / 像素比
    height: 1 / scale,
    backgroundColor: "#000"
  }
})

实现效果：
005

Flex布局

与CSS中的Flex布局类似：https://blog.csdn.net/qq_53472371/article/details/120919930

但是React Native要用 flexDirction\ alignItem\ justifyContent
006
代码笔记：

// 5、flex布局
import React, {
    Component } from "react"
import {
    View, Text, StyleSheet } from "react-native"

export default class App5 extends Component {
   
  render() {
   
    return (
      <View style={
   styles.container}>
        <View style={
   styles.box1}><Text style={
   {
    fontSize: 20 }}>1</Text></View>
        <View style={
   styles.box2}><Text style={
   {
    fontSize: 40 }}>2</Text></View>
        <View style={
   styles.box3}><Text style={
   {
    fontSize: 30 }}>3</Text></View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
   
  container: {
   
    display: "flex",
    flex: 1,
    // 确定哪个是主轴
    // flexDirection的4个值：'row', 'row-reverse', 'column', 'column-reverse'
    flexDirection: "row",

    // 控制主轴对齐方式
    // justifyContent的4个值：'flex-start', 'flex-end', 'center', 'space-between', 'space-around'
    // justifyContent: "space-between"
    justifyContent: 'center',

    // 控制侧轴方向的对齐方式
    // alignItems的4个值：'flex-start', 'flex-end', 'center', 'stretch', 'baseline'
    // 'stretch' 设置侧轴方向上的拉伸，高度没有设置值，才能看到效果（要去掉高度属性）
    // 'baseline' 设置基线对齐，设置以文字底部来对齐
    // alignItems: 'baseline'
    alignItems: 'center'
  },
  box1: {
   
    width: 100,
    height: 100,
    backgroundColor: "#ccc"
  },
  box2: {
   
    width: 100,
    height: 100,
    backgroundColor: "#fcf"
  },
  box3: {
   
    width: 100,
    height: 100,
    backgroundColor: "#ffc"
  },
})

Flex布局练习

代码笔记：

// 6、Flex布局练习
import React, {
    Component } from "react"
import {
    View, Text, StyleSheet, Dimensions } from "react-native"

const {
    width, height, scale } = Dimensions.get('window')

// 抽组件
class Row extends Component {
   
  render() {
   
    return (
      <View style={
   styles.row}>
        <View style={
   styles.box1}><Text>1</Text></View>
        <View style={
   styles.box2}><Text>2</Text></View>
        <View style={
   styles.box3}><Text>3</Text></View>
      </View>
    )
  }
}

export default class App6 extends Component {
   
  render() {
   
    return (
      <View style={
   styles.container}>
        <Text style={
   {
    fontSize: 18 }}>Flex布局练习</Text>
        <View style={
   styles.boxs}>
          <Row />
          <Row />
          <Row />
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
   
  container: {
   
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 80
  },
  boxs: {
   
    width: width * 0.9,    // 0.9倍的屏幕宽度
    height: 200,
    backgroundColor: "#ccc",
    marginTop: 10
  },
  row: {
   
    flex: 1,
    borderWidth: 1,
    borderColor: "#000",
    // 设置主轴方向为水平
    flexDirection: "row"
  },
  box1: {
   
    flex: 1.5,
    borderWidth: 1,
    borderColor: "#f00",
  },
  box2: {
   
    flex: 1,
    borderWidth: 1,
    borderColor: "#f00",
  },
  box3: {
   
    flex: 2,
    borderWidth: 1,
    borderColor: "#f00",
  }
})

实现效果：
008

Button按钮组件

代码笔记：

app.js：

// Button按钮组件
import React, {
    Component } from "react"
import {
    View, Text, StyleSheet, Button } from "react-native"


export default class App7 extends Component {
   

  constructor(props) {
   
    super(props)

    this.state = {
   
      num: 20
    }

    // this的指向问题
    this.handlePress = this.handlePress.bind(this)
  }

  handlePress() {
   
    // alert(123);
    this.setState({
   
      num: this.state.num + 1
    })
  }

  render() {
   
    return (
      <View>
        <Text>{
   this.state.num}</Text>
        <Button title="按钮中的文本" color="skyblue" onPress={
   this.handlePress} style={
   styles.btn}></Button>
      </View>
    )
  }
}

// Button按钮组件不能修改样式！！！
const styles = StyleSheet.create({
   
  btn: {
   
    width: 150,
    height: 100
  }
})

自定义按钮组件TouchableOpacity

因为Button样式本身有局限性。TouchableOpacity组件可以自由定义组件样式。

代码笔记：

app.js：

// Button按钮组件
import React, {
    Component } from "react"
import {
    View, Text, StyleSheet, Button, TouchableOpacity } from "react-native"


export default class App7 extends Component {
   

  constructor(props) {
   
    super(props)

    this.state = {
   
      num: 20
    }

    // this的指向问题
    this.handlePress = this.handlePress.bind(this)
  }

  handlePress() {
   
    // alert(123);
    this.setState({
   
      num: this.state.num + 1
    })
  }

  render() {
   
    return (
      <View>
        <Text>{
   this.state.num}</Text>
        <Button title="按钮中的文本" color="skyblue" onPress={
   this.handlePress} style={
   styles