React-Native学习第二天(继续了解基础组件)

岳宣
2023-12-01

React-Native

1.组件状态State

跟React一样,RN的数据也是由props、state两部分组成。

  • state 由 React 组件自己内部管理,是可变的。组件可以随时更新 state 的数据,组件外部则无法访问和更新。

  • props 是 React 组件的属性,是组件外部传递给组件的数据。对于组件来说,这些数据是不可变的。组件只能读取不能更改。只能由调用组件的外部代码来更改。

    props 一般情况下由组件自描述,也就是组件描述自己能够接受哪些数据。但外部可以无视,可以传递比组件自描述更多的数据。

    还有需要注意的是,在RN中onPress相当于网页中的onClick

2.组件属性Props

组件的调用者可以通过 属性 将数据传递给组件,然后组件内部可以通过 组件属性 props 来获取调用者传递的数据

import React, { Component } from 'react'
import { Text, View, StyleSheet,Alert} from 'react-native'

class Test extends React.Component {

    constructor(props) {
        super(props)
        this.state = { name: props.name }
    }
    // 触摸事件
    updateState = () => {
        const name = this.state.name == 'Gelx' ? 'GX' : 'Gelx'
        this.setState({name:name})
    }

    render() {
        const { name } = this.state
        return (
        <View>
            <Text onPress={this.updateState}>{name}</Text>
        </View>
        )
    }
}

class App extends React.Component {

    render() {
        return (
            <View style={styles.container}>
                <Test name={'Gelx'} />
            </View>
        )
    }
}

const styles = StyleSheet.create ({
   container: {
      margin:10
   },
})
export default App;

3.输入组件TextInput

RN中内置了输入组件,可以直接通过相关的属性参数设置达到想要的结果,比较常见的属性如下:

属性类型说明
stylestyle用于定制组件的样式
underlineColorAndroidcolorAndroid 中下划线的颜色,透明则为 transparent
placeholderstring占位符
placeholderTextColorcolor占位符的颜色
multilinebool是否多行,默认为单行
numberOfLinesnumber设置了 multiline 后要设置的行数
editablebool是否可编辑
keyboardTypestring键盘类型,可选的值有 “default”,“number-pad”,“decimal-pad”, “numeric”,“email-address”,“phone-pad”
secureTextEntrybool是否属于密码框类型
returnKeyTypestring键盘上的返回键类型,可选的值有 “done”,“go”,“next”,“search”,“send”
autoCapitalizestring字母大写模式,可选的值有:‘none’, ‘sentences’, ‘words’, ‘characters’
onChangeTextfunction文本变更后的回调函数,参数为输入框里的文本

除此之外,还有一个TouchableOpacity组件,这个组件可以在触摸时会出现一个透明的效果,以表示此时正在进行触摸的操作

4.图片组件 Image

图片组件可以帮助我们实现显示本地图片、网络图片、 base64格式的图片

在图标组件的属性中resizeMethod 属性较为重要一些,它可用于设置图片如何适配图片组件。默认值为 auto

可选的值有: ‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’。

<ScrollView>
         {/* 普通图片设置 */}
        <Image
          source={require('./assets/1.png')}
        />
        {/* 网络图片设置 */}
        <Image
          style={{margin:10,width: 177, height: 100}}
          source={{uri: 'https://www.twle.cn/static/i/img1.jpg'}}
        />
        {/* 图片显示模式,contain,安装正常的比例缩放到整个可以刚好放进来 */}
        <Image
          style={{margin:10,width: 200, height: 200,resizeMode:'contain',borderWidth:1,borderColor:'#000'}}
          source={require('./assets/img1.jpg')}
        />
        {/* 不会变形,放大图片至刚好覆盖住整个内容 */}
        <Image
          style={{margin:10,width: 200, height: 200,resizeMode:'cover',borderWidth:1,borderColor:'#000'}}
          source={require('./assets/img1.jpg')}
        />
        {/* 直接将图片拉升成设置的大小,会变形 */}
        <Image
          style={{margin:10,width: 200, height: 200,resizeMode:'stretch',borderWidth:1,borderColor:'#000'}}
          source={require('./assets/img1.jpg')}
        />
      </ScrollView>

还有一些其他可选的属性

属性类型说明
borderTopRightRadiusnumber设置右上角的圆角度数,默认值为 0
borderBottomLeftRadiusnumber设置左下角的圆角度数,默认值为 0
borderBottomRightRadiusnumber设置右下角的圆角度数,默认值为 0
borderTopLeftRadiusnumber设置左上角的圆角度数,默认值为 0
borderRadiusnumber统一设置四个角的圆角度数,默认值为 0
borderColorcolor设置边框的颜色
borderWidthnumber设置边框的宽度,默认值为 0
backgroundColorcolor设置图片组件的背景色
opacitynumber设置图片组件的透明度
overflowstring当组件超出屏幕宽高时是否可见, ‘visible’ 显示, ‘hidden’ 隐藏
backfaceVisibilitystring定义当组件不面向屏幕时是否可见, ‘visible’ 显示, ‘hidden’ 隐藏
tintColorcolor将所有非透明的图片像素改为此颜色
resizeModestring设置图片如何适应图片容器,可选的值有: ‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’

5.活动指示器组件 ActivityIndicator

此组件用于表示转圈的加载或等待时的动画组件

有以下属性可以选择

属性类型是否必须说明
animatingboolean是否显示活动指示器。默认为 truefalse 则表示隐藏
colorcolor⭕️ 的颜色,默认情况下,iOS 为灰色,Android深青色
sizestring只有两个选项 largesmall,默认是 small

6.弹出框组件 Alert

用于弹出 提示弹出警告弹出确认 等需要用户确认的动作。

使用方法:在函数中编写Alert.alert()即可

import React from 'react'
import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native'

const App = () => {

    const showTip = () => {
        Alert.alert('删除数据成功')
    }

    const showAlert = () =>{
        Alert.alert(
            '警告',
            '确认删除?',
            [
                {text: '确认', onPress: () => showTip()},
                {text: '取消', style: 'cancel'}, 
            ],
            {cancelable: false}
        )
    }

    return (
        <TouchableOpacity onPress = {showAlert} style = {styles.button}>
            <Text>删除</Text>
        </TouchableOpacity>
    )
}

export default App

const styles = StyleSheet.create ({
    button: {
        backgroundColor: '#4ba37b',
        width: 100,
        borderRadius: 50,
        alignItems: 'center',
        marginTop: 100
    }
})

6.存储数据组件 AsyncStorage

需要注意的是:

  • 需要通过以下代码额外安装该组件

yarn add @react-native-community/async-storage

  • 它是一个简单未加密并且是异步的组件

它有以下方法:

方法说明
getItem()根据给定的 key 来读取数据
setItem()将一个键值对添加到系统中,如果已经存在 key 则覆盖
removeItem()根据给定的 key 删除指定的键值对
getAllKeys()返回数据库中所有的
multiGet()根据给定的 key 列表获取多个键值对
multiSet()将多个键值对存储到系统中
multiRemove()根据多个 key 删除多个键值对
clear()清空整个数据库系统
export default class App extends Component {
   state = {
      'name': '吴亦凡?',
      'inputText':'没错,就是发福了',
   }

   async readName() {
        try {
         //   读取数据
          const value = await AsyncStorage.getItem('name')
          if(value !== null) {
              this.setState({ 'name': value })
          }
          Alert.alert("读取数据成功")
        } catch(e) {
          console.log(e);
          Alert.alert("读取数据失败!")
        }
   }

   setName = () => {
      // 保存数据
      AsyncStorage.setItem('name', this.state.inputText);
      Alert.alert("保存成功!")
   }
   render() {
      return (
         <View style = {styles.container}>
            <TextInput 
              style = {styles.textInput} 
              autoCapitalize = 'none' 
              value={this.state.inputText} />
            <View style={{flexDirection:'row'}}>
                <TouchableHighlight style={[styles.button,{marginRight:8}]} onPress={this.setName}>
                    <Text style={styles.buttonTxt}>保存</Text>
                </TouchableHighlight>
                <TouchableHighlight style={[styles.button,{backgroundColor:'blue'}]} onPress={this.readName.bind(this)}>
                    <Text style={styles.buttonTxt}>读取</Text>
                </TouchableHighlight>
            </View>
            <View style={{marginTop:8}}>
                <Text>当前的文字:{this.state.name}</Text>
            </View>
         </View>
      )
   }
}

7.动画组件 Animated

动画需要注意的是:初始化动画需要在组件即将加载的声明周期中初始化

class App extends Component {
   UNSAFE_componentWillMount = () => {
      //创建动画属性对象
      this.animatedWidth = new Animated.Value(50)
      this.animatedHeight = new Animated.Value(100)
   }
   animatedBox = () => {
      //点击后,设置动画变化
      Animated.timing(this.animatedWidth, {
         toValue: 200,
         duration: 1000
      }).start()
      Animated.timing(this.animatedHeight, {
         toValue: 500,
         duration: 500
      }).start()
   }
   render() {
      const animatedStyle = {
            width: this.animatedWidth, 
            height: this.animatedHeight }
      return (
         <TouchableOpacity 
            style = {styles.container} 
            onPress = {this.animatedBox}>
            <Animated.View style = {[styles.box, animatedStyle]}/>
         </TouchableOpacity>
      )
   }
}
export default App

8.开关组件 Switch

Switch只有两个值 truefalse,这是固定的

Switch 还有两个事件回调函数 onValueChangeonChange。前者当开关的值发生改变时触发,参数是 开关变更后的新值。 后者当用户尝试改变开关状态时触发,参数是 事件

9.状态栏组件 StatusBar

通过StatusBar可以进行以下更改:

  1. 显示或隐藏状态栏。
  2. 设置主题色:亮色系还是暗色系。
  3. 设置显示或隐藏时是否启用动画。
    以下是代码案例
<StatusBar 
    barStyle    = "dark-content|light-content" 
    hidden      = {true|false}
    animated    = {true|false}
/>

10.滚动视图组件 ScrollView

跟小程序的ScrollView组件类似,当屏幕内容超过一屏时,可以触摸上拉,继续显示内容

11.选择器组件 Picker

组件中有两个属性:

属性说明
selectedValue用于设置默认的选中项目
onValueChange用于设置选中项变更时的触发操作

在每一个选项中,还有两个属性:

属性说明
label用于设置显示出来的名称
value用于设置选项的值

12.网络请求

跟React一样,RN中网络请求分为 GET、POST、PUT请求,都是采用fetch进行数据的请求,以及返回得到的数据内容,并进行渲染

 类似资料: