[iOS开发] (C) react Native核心组件十 20240418

【前言】
（二）中 我们一起学习了属性和布局，现在，我们开始往layout内增加一些组件。

三 组件和api

简介 RN 中的核心组件

RN 中的核心组件，是对原生组件的封装

• 原生组件: Android或ios内的组件
• 核心组件:RN中最常用的，来在 react-native 的组件

开发 React Native 应用程序时，通常会使用以下核心组件：

View（视图）：View 是 React Native 中最基本的组件之一，用于创建布局结构。它类似于 web 开发中的

1 alert

User
  createTwoButtonAlert = () => {
    Alert.alert('警告标题', '警告内容', [
      {text: '取消', onPress: () => console.log('Cancel'), style: 'cancel'},
      {text: '确定', onPress: () => console.log('Ok'), style: 'default'},
    ]);
  };
  createThreeButtonAlert = () => {
    Alert.alert('更新提示', '发现新版本是否现在更新？', [
      {text: '取消', onPress: () => console.log('Cancel'), style: 'cancel'},
      {text: '确定', onPress: () => console.log('Ok'), style: 'default'},
      {text: '稍后再试', onPress: () => console.log('稍后提醒我')},
    ]);
  };
  

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

export default class index extends Component {
 // 创建一个包含两个按钮的警告框
createTwoButtonAlert = () => {
  // 调用 Alert.alert() 方法显示警告框
  Alert.alert(
    // 警告框标题
    '警告标题',
    // 警告框内容
    '警告内容',
    // 按钮配置数组
    [
      // 第一个按钮配置对象
      {
        // 按钮显示的文本
        text: '取消',
        // 按下按钮时触发的回调函数
        onPress: () => {
          // 在控制台输出 'Cancel'，表示用户按下了取消按钮
          console.log('Cancel');
        },
        // 按钮样式（取消按钮）
        style: 'cancel'
      },
      // 第二个按钮配置对象
      {
        // 按钮显示的文本
        text: '确定',
        // 按下按钮时触发的回调函数
        onPress: () => {
          // 在控制台输出 'Ok'，表示用户按下了确定按钮
          console.log('Ok');
        },
        // 按钮样式（默认按钮）
        style: 'default'
      },
    ]
  );
};

// 创建一个包含三个按钮的警告框
createThreeButtonAlert = () => {
  // 调用 Alert.alert() 方法显示警告框
  Alert.alert(
    // 警告框标题
    '更新提示',
    // 警告框内容
    '发现新版本是否现在更新？',
    // 按钮配置数组
    [
      // 第一个按钮配置对象
      {
        // 按钮显示的文本
        text: '取消',
        // 按下按钮时触发的回调函数
        onPress: () => {
          // 在控制台输出 'Cancel'，表示用户按下了取消按钮
          console.log('Cancel');
        },
        // 按钮样式（取消按钮）
        style: 'cancel'
      },
      // 第二个按钮配置对象
      {
        // 按钮显示的文本
        text: '确定',
        // 按下按钮时触发的回调函数
        onPress: () => {
          // 在控制台输出 'Ok'，表示用户按下了确定按钮
          console.log('Ok');
        },
        // 按钮样式（默认按钮）
        style: 'default'
      },
      // 第三个按钮配置对象
      {
        // 按钮显示的文本
        text: '稍后再试',
        // 按下按钮时触发的回调函数
        onPress: () => {
          // 在控制台输出 '稍后提醒我'，表示用户按下了稍后再试按钮
          console.log('稍后提醒我');
        }
      },
    ]
  );
};

  //注意:Button里面不能写style
  render() {
    return (
      <View styles={[styles.container]}>
        <Button
          title="Alert"
          onPress={() => {
            alert('我是一个按钮');
          }}
        />
        <Button
          title="Alert.alert"
          onPress={() => {
            Alert.alert('我是一个按钮');
          }}
          color={'red'}
        />
        <Button
          title="两个按钮"
          onPress={this.createTwoButtonAlert}
          color={'blue'}
        />
        <Button
          title="三个按钮"
          onPress={this.createThreeButtonAlert}
          color={'tomato'}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

2 Switch

（1）写一个开关，默认不隐藏状态栏（state 初始化为 不隐藏），并赋值给switch，这样 状态栏通过 this.state.hideStatusBar 联动。
点击swift就会触发 onValueChange={this.toggleStatusBar} 进行一次 state值取反，重新赋值给 StatusBar 并改变状态栏。

import React, { Component } from 'react'
import { Text, StyleSheet, View, StatusBar, Switch } from 'react-native'
// constructor()：这是类的构造函数，用于初始化类的实例。
// 在 React 组件中，构造函数主要用于初始化组件的状态（state）和绑定事件处理方法。
// super()：这是调用父类（即 React.Component）的构造函数，确保在初始化子类时先调用父类的构造函数，以便继承父类的属性和方法。
// this.state = { hideStatusBar: false }：这是在组件的状态对象中，定义了一个名为 hideStatusBar 的状态属性，并将其初始值设为 false。
// 在 React 组件中，状态对象用于存储组件内部的数据，并且当状态发生变化时，React 会自动重新渲染组件以反映这些变化。

export default class index extends Component {

    constructor() {
        // 调用父类的构造函数
        super();
        // 初始化组件的状态
        this.state = {
            // 属性：hideStatusBar，类型：boolean，初始值为 false
            hideStatusBar: false
        };
    }


    // 写成一个箭头函数的形式 在类组件中想要改状态的值的话  只能 在箭头函数中操作 
    //setState() 是 React 组件类中的一个方法，用于更新组件的状态。
    //setState() 方法会将新的状态合并到当前状态中，然后触发组件的重新渲染。这样做是为了保持状态的不变性，以避免直接修改状态可能引起的问题。
    toggleStatusBar = () => {
        this.setState({
            hideStatusBar: !this.state.hideStatusBar //直接取反

        })
    }
    render() {
        return (
            <View>
                <Text>index</Text>

                <StatusBar
                    // hidden={false}
                    hidden={this.state.hideStatusBar}
                    //不是直接写死，而是 通过hide StatusBar来控制 状态栏
                    backgroundColor={"red"}//ios不奏效
                    barStyle={"dark-content"}

                />

                <Switch
                    trackColor={{ false: '#999', true: '#666' }}
                    // thumbColor={'blue'} 按钮的前景 
                    thumbColor={this.state.hideStatusBar? "green":"red"}
                   
                    //下面添加一个具体的事件  先初始化一个值 再探测值是否发生变化
                    value={this.state.hideStatusBar}
                //value 属性被设置为 this.state.hideStatusBar，意味着 Switch 组件的状态取决于 hideStatusBar 的值。当 hideStatusBar 的值发生变化时，Switch 组件也会相应地更新其状态。

//这样做的目的是为了将 Switch 组件的状态与组件类中的状态保持同步，以确保用户操作能够正确地反映到界面上。
                    onValueChange={this.toggleStatusBar}
                //  onValueChange是switch内置方法， 探测value值是否发生变化   
                //this.toggleStatusBar 函数被传递给了 onValueChange，意味着当值发生变化时，将调用 toggleStatusBar 函数，结果将hideStatusBar 拨动。
                />

            </View>



        )
    }
}

3 ActivityIndicator

import {StyleSheet, View, ActivityIndicator, Platform} from 'react-native';
import React from 'react';

//加载图标
export default function index() {
  if (Platform.OS === 'android') {
    alert('当前平台是安卓');
  } else if (Platform.OS === 'ios') {
    alert('当前平台是IOS');
  }
  return (
    <View style={[styles.container]}>
      <ActivityIndicator color={'blue'} size={'large'} />
      <ActivityIndicator color={'green'} size={'small'} />
      {/*数字指定大小只在安卓应用有效*/}
      <ActivityIndicator color={'#00d0ff'} size={70} />
      <ActivityIndicator color={'red'} size={100} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

4 image

import {Text, StyleSheet, View, Image, Dimensions, ScrollView} from 'react-native';
import React, {Component} from 'react';

export default class index extends Component {
  render() {
    return (
      <ScrollView>  
      <View style={[styles.container]}>
     
        <Image
        style={[styles.itemImage]}
        source={require('./images/wdmpp.jpg')}
        
        />
        <Image
          style={styles.tinyLogo}
          source={{
            uri: 'https://reactnative.dev/img/tiny_logo.png',
          }}
        />
        <Image
          style={styles.logo}
          source={{
            uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
          }}
        />
      </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemImage: {
    height: Dimensions.get("window").height,
    width: Dimensions.get('window').width,
    marginVertical: 20,
  },
  tinyLogo: {
    width: 100,
    height: 100,
    marginVertical: 20,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

5 textinput

在React Native中，TextInput组件提供了一系列属性来控制文本输入框的行为和样式。以下是一些常用的TextInput属性及其介绍：

1. value: 设置或获取用户往文本输入框中输入的值。
2. onChangeText: 当文本输入框的值发生变化时，调用的回调函数。
3. placeholder: 设置文本输入框的占位符文本，当输入框为空时显示“请输入用户名”。
4. placeholderTextColor: 设置占位符文本的颜色。
5. editable: 设置文本输入框是否可编辑。
6. multiline: 设置文本输入框是否支持多行输入。
7. numberOfLines: 当multiline为true时，设置文本输入框的行数。
8. secureTextEntry: 设置文本输入框是否用于输入密码，当为true时输入内容会被隐藏。
9. autoCapitalize: 设置文本输入框的自动大写风格，可选值包括none、sentences、words、characters。
10. autoCorrect: 设置文本输入框是否启用自动纠正功能。
11. autoFocus: 设置文本输入框是否自动获取焦点。
12. keyboardType: 设置文本输入框对应的键盘类型，如default、numeric、email-address等。
13. returnKeyType: 设置键盘上返回键的类型，如done、go、search等。
14. onFocus: 文本输入框获取焦点时调用的回调函数。
15. onBlur: 文本输入框失去焦点时调用的回调函数。
16. onSubmitEditing: 当用户提交编辑时调用的回调函数。
17. style: 设置文本输入框的样式。
18. maxLength: 设置文本输入框可输入的最大字符数。
19. keyboardAppearance: 设置键盘的外观，如default、dark、light。
20. clearButtonMode: 设置清除按钮的显示模式，如never、while-editing、unless-editing、always。

闲聊回调函数
回调函数就像是一份待办事项清单上的任务。当某个任务完成时，你会去执行它，而不是在开始时就执行。在编程中，这个“任务”就是函数，而“完成”则意味着某个事件发生了或某个操作完成了。

在React Native中，当用户输入文本或点击按钮时，你想要执行的操作可能会有所不同，这就是回调函数的用武之地。你可以告诉React Native：“当用户输入文本时，请执行这个函数”，或者：“当用户点击按钮时，请执行另一个函数”。这些函数就是回调函数，它们会在特定的事件发生时被调用，以执行你预先定义的操作。

/* eslint-disable no-alert */
import { StyleSheet, View, TextInput, Dimensions, Button } from 'react-native';
import React, { Component } from 'react';

export default class index extends Component {

  constructor() {

    // まず、値を取得するために状態を使用できます.なので、コンストラクタ　を書きます
    //コンストラクタ中に　状態を初期化します
    //状態は　set state というメソッドを使用してのみ　変更できます .その値は
    super()
    this.state = {
      username: ''

    }

  }

  doLogin = () => {
    // フォーム中のデータを取得（しゅとく）するには、3つ（みっつ）の方法（ほうほう）があります。

// onChangeValueハンドラーでテキスト入力の変更を監視（かんし）し、set.state.valueを使って状態中にのusernameを更新します。
// そして、状態のusername値をdoLoginのusername変数に代入（だいにゅう）し、ポップアップ（popーUP）で表示します。
    alert(this.state.username)

  }
  render() {
    return (
      <View style={[styles.container]}>
        <TextInput
          //  入力ファームを作成
          style={[styles.input]}
          placeholder='请输入狗狗的名字'
          value={this.state.username}

          onChangeText={
            // val パラメーター

            (val) => {
              this.setState({
                username: val
              })

            }
          }

        // このコールバック関数は、テキストが変更されるたびに　後続（こうぞく）のイベントがトリガーされることを意味します
        // 这个回调函数意味着每当文本发生变化时，后续事件就会被触发。


        />
        <View>
          {/* // viewタグを作成し、その中にbuttonボタンを配置して、ファームの送信機能を実装します。 */}
          {/* // 在react中 写一个view标签 ，view标签中写一个button按钮  ，实现提交表单功能 */}
          <Button title='登陆' onPress={this.doLogin} />
          {/* 点击按钮的时候，触发onpress这个方法   进行了表单提交 
      ボタンをクリックした時に、　on Pressメソッドをトリガーして　ファームの送信を行います */}
        </View>

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    width: Dimensions.get('window').width - 20,
    margin: 10,
    borderWidth: 1,
    borderColor: 'red',
    paddingHorizontal: 5,
  },
  btn: {
    margin: 10,
    // borderWidth: 1,

  },
});

6 TouchableHighlight

/* eslint-disable no-alert */
import {
  Text,
  StyleSheet,
  View,
  TouchableHighlight,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native';
import React, {Component} from 'react';


																				

						

							上一篇：							
								[iOS开发]（六）反应原生路由嵌套传递参与框架的原则（完） 20240423							
						
						

							下一篇：							
								用于 STM32 中 I2C 通信的完整 C 代码示例							
						
					
															

						

							推荐阅读						
						

														

								
									

										[iOS开发] (C) react Native核心组件十 20240418