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中内置了输入组件，可以直接通过相关的属性参数设置达到想要的结果，比较常见的属性如下：

属性	类型	说明
style	style	用于定制组件的样式
underlineColorAndroid	color	Android 中下划线的颜色，透明则为 `transparent`
placeholder	string	占位符
placeholderTextColor	color	占位符的颜色
multiline	bool	是否多行，默认为单行
numberOfLines	number	设置了 `multiline` 后要设置的行数
editable	bool	是否可编辑
keyboardType	string	键盘类型，可选的值有 “default”,“number-pad”,“decimal-pad”, “numeric”,“email-address”,“phone-pad”
secureTextEntry	bool	是否属于密码框类型
returnKeyType	string	键盘上的返回键类型，可选的值有 “done”,“go”,“next”,“search”,“send”
autoCapitalize	string	字母大写模式，可选的值有:‘none’, ‘sentences’, ‘words’, ‘characters’
onChangeText	function	文本变更后的回调函数，参数为输入框里的文本

除此之外，还有一个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>

还有一些其他可选的属性

属性	类型	说明
borderTopRightRadius	number	设置右上角的圆角度数，默认值为 0
borderBottomLeftRadius	number	设置左下角的圆角度数，默认值为 0
borderBottomRightRadius	number	设置右下角的圆角度数，默认值为 0
borderTopLeftRadius	number	设置左上角的圆角度数，默认值为 0
borderRadius	number	统一设置四个角的圆角度数，默认值为 0
borderColor	color	设置边框的颜色
borderWidth	number	设置边框的宽度，默认值为 0
backgroundColor	color	设置图片组件的背景色
opacity	number	设置图片组件的透明度
overflow	string	当组件超出屏幕宽高时是否可见， ‘visible’ 显示, ‘hidden’ 隐藏
backfaceVisibility	string	定义当组件不面向屏幕时是否可见， ‘visible’ 显示, ‘hidden’ 隐藏
tintColor	color	将所有非透明的图片像素改为此颜色
resizeMode	string	设置图片如何适应图片容器，可选的值有： ‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’

5.活动指示器组件 ActivityIndicator

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

有以下属性可以选择

属性	类型	是否必须	说明
animating	boolean	否	是否显示活动指示器。默认为 `true`，`false` 则表示隐藏
color	color	否	⭕️ 的颜色，默认情况下，`iOS` 为灰色，`Android` 为深青色
size	string	否	只有两个选项 `large` 和 `small`，默认是 `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只有两个值 true 和 false，这是固定的

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

9.状态栏组件 StatusBar

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

显示或隐藏状态栏。
设置主题色：亮色系还是暗色系。
设置显示或隐藏时是否启用动画。
以下是代码案例

<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进行数据的请求，以及返回得到的数据内容，并进行渲染