React-Native基础知识点学习

前端小白白....

已于 2022-05-14 11:54:14 修改

阅读量1.1k

点赞数 2

分类专栏： react 文章标签： react.js 学习 react native

于 2022-05-12 21:12:26 首次发布

本文链接：https://blog.csdn.net/m0_60322879/article/details/124739599

版权

react 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.react-native 是一套代码可以在安卓和ios二个终端运行的，移动端app。它没有继承样式的属性，写字体样式大小的时候不需要带px单位，它整体采用flex弹性布局，flex-direction 默认为y轴为主轴flex-direction：column 所以的盒子都是默认flex布局的

2.标签有View 是相当于div 的盒子标签还有Text 是文本标签

<StatusBar backgroundColor='transparent' translucent={true}>,背景图片到啦刘海屏幕下面显示啦 Platform :是判断机型是安卓还是ios系统，：实例如下

if （Platform.os==='ios'）{borderRadius=5},如果是ios按钮边框圆角为5有圆角，安卓则没有

<Dimensions> 是获取当前屏幕的宽高组件 const widthPx= Dimensions.get('window').width

const heightPx=Dimensions.get('window').height

<Text numberOfLines={1}> 文字超出部分显示...省略号

TextInput 是输入框标签，TouchableOpacity 是点击后有透明度的变化

ScrollView 是滑动标签

Image 是图片标签

//这个是本地图片的引入
<Image source={require('./assets/1.png')} />
//这个是网路图片的引入
<Image style={{width:80,height:80}} source={{uri：'https://www.dia.com'}} />

活动指示器就是locading指示为:ActivityIndicator 一个会旋转的locading

样式写在export default App 后面

const styles = styleSheet.create({

arr{width:80,height:80}

}) StyleSheet.create 的创建是可选的，但提供了一些关键优势。它通过将它们转换为引用一个内部表的纯数字，来确保值是不可变的和不透明的。通过将它放在文件的最后，也确保了它们为应用程序只创建一次，而不是每一个 render 都创建。

弹出框Alert 用法通过Alert.alert(‘删除啦’)

//Alert.alert('这是标题','这是描述文字')
//同时添加， OK 和 CANCEL 按钮
Alert.alert(
  '这是标题',
  '这是描述',
  [
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ]
)
//自定义弹框
Alert.alert(
  '这是标题',
  '这是描述',
  [
    {text: '这是自定义按钮', onPress: () => console.log('Ask me later pressed')},
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ]
)

存储数据的组件 : AsyncStorage 它返回一个promise对象，需要用async 和await去修饰一下

存数据：AsyncStorage.setItem('name',this.state.msg)

取数据：通过async和await修饰一下：AsyncStorage.getItem（'name'）

动画组件：Animated 用法Animated.View

检测机型组件：React Native 提供了一个检测当前运行平台的模块。如果组件只有一小部分代码需要依据平台定制，那么这个模块就可以派上用场

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

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100
});

开关组件：Switch 组件通过控制Textvalue的值为true或者为false ，从而控制开和关

Clipboard 组件

剪切板的内容组件，里面有复制，粘贴，剪切

需要注意的是Clipboard的属性，getString() 和 setString() 都是异步操作，返回的是一个 Promise

下面的范例，当我们点击 写入剪贴板 时往剪贴板中输入内容，当我们点击 读取剪贴板 时从 剪贴板中读取 内容

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

export default class App extends Component{

  async getContent() {
    var content = await Clipboard.getString();
    Alert.alert("剪贴板内容",content)
  }

  setContent() {
    Clipboard.setString('简单教程 https://www.twle.cn/');
    }

  render() {
    return (
      <View>
        <View style={{margin:20}}>
           <TouchableHighlight onPress={() => setContent()}>
                <Text>写入剪贴板</Text>
            </TouchableHighlight>
        </View>
        <View style={{margin:20}}>
            <TouchableHighlight onPress={() => getContent()} >
                <Text>读取剪贴板</Text>
            </TouchableHighlight>
        </View>
      </View>
    );
  }
}

BackgroundImage 组件，是背景图片组件

ImageBackground 组件实现了 <Image> 同样的属性，也就说，具有 resizeMode 图片的模式、 source 图片的引入 两个重要属性。

<ImageBackground 
  source={...} 
  style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
</ImageBackground>

下面的范例演示了 ImageBackground 组件的基本使用

import React, {Component} from 'react';
import {Text,View,ImageBackground} from 'react-native';

export default class App extends Component{

  constructor(props) {
    super(props);
    this.imgRef = React.createRef();
  }

  render() {
    return (
      <View>
        <ImageBackground
          style={{width:300,height:169}} 
          source={{uri:'https://www.twle.cn/static/i/img1.jpg'}}
          imageRef={this.myRef}
          imageStyle={{width:300,height:169}}>
          <Text>简单教程，简单编程</Text>
          <Text>https://www.twle.cn</Text>
        </ImageBackground>
      </View>
    );
  }
}

NetInfo 模块：用于获取当前用户的网络状态，有有网络( online ) 或者 无网络 ( offline )

安装 react-native-community/react-native-netinfo 模块

//第一步
yarn add @react-native-community/netinfo
//或者用npm
npm install --save @react-native-community/netinfo
//第二步，安装完成后还需要 连接
react-native link @react-native-community/netinfo

导入模块

//第一种导入
import { NetInfo } from 'react-native'
//第二种导入
import NetInfo from "@react-native-community/netinfo";

下面的范例，使用 NetInfo 模块的 getConnectionInfo() 方法立即获取当前的网络状态

import React, {Component} from 'react';
import {Text,View, NetInfo} from 'react-native';

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
      connectionInfo:{
        type:'none',
        effectiveType:'ethernet'
      }
    }

    var that = this;
    NetInfo.getConnectionInfo().then((connectionInfo) => {
      that.setState({connectionInfo})
    });
  }

  render() {

    const {connectionInfo} = this.state

    return (
      <View>
          <Text>当前的网络类型是： {connectionInfo.type } - {connectionInfo.effectiveType} </Text>
          <Text>简单教程，简单编程 (https://www.twle.cn)</Text>
      </View>
    );
  }
}

下面的范例，使用 NetInfo 模块的 addEventListener() 方法添加一个网络变更事件监听器

import React, {Component} from 'react';
import {Text,View, NetInfo} from 'react-native';

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
      connectionInfo:{
        type:'none',
        effectiveType:'ethernet'
      }
    }

    // 添加
    NetInfo.addEventListener('connectionChange', this.handleFirstConnectivityChange.bind(this));

    var that = this;
    NetInfo.getConnectionInfo().then((connectionInfo) => {
      that.setState({connectionInfo})
    });
  }

  // 回调函数
  handleFirstConnectivityChange(connectionInfo) {
    this.setState({connectionInfo})

    //移除
    NetInfo.removeEventListener('connectionChange',this.handleFirstConnectivityChange.bind(this));
  }

  render() {

    const {connectionInfo} = this.state

    return (
      <View>
          <Text>当前的网络类型是： {connectionInfo.type } - {connectionInfo.effectiveType} </Text>
          <Text>简单教程，简单编程 (https://www.twle.cn)</Text>
      </View>
    );
  }
}

Button按钮

下面的范例，我们布局了一个按钮 Button ，当点击按钮时弹出提示

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

export default class App extends React.Component {

  render() {
    return (
      <Button 
        onPress={(e) => Alert.alert("你点击了按钮")}
//就是按钮显示的内容
        title="快点我"
        color="#841584"
//手机会读取这个段内容，给残疾人士准备的
        accessibilityLabel="please press me"
      />
    );
  }
}

Picker 组件

Picker 组件会渲染一个选择框，类似于 HTML 中的 <select> 标签，下拉框组件

下面的范例演示了 Picker 的基本使用

import React, {Component} from 'react';
import {Text,View,Picker} from 'react-native';

export default class App extends Component{

   constructor(props) {
        super(props)
        this.state = {language:"请选择语言..."}
   }

  render() {
    return (
      <View style={{margin:50}}>
          <Picker
              selectedValue={this.state.language}
              style={{height: 50, width: 100}}
              onValueChange={(itemValue, itemIndex) => 
                    this.setState({language: itemValue})}>
              <Picker.Item label="Java" value="java" />
              <Picker.Item label="JavaScript" value="js" />
              <Picker.Item label="简单教程" value="twle" />
          </Picker>
    </View>
    );
  }
}

Modal 组件：Modal 组件提供了一种覆盖在其它视图之上显示内容的简单方法。也就是常常会用到的模态对话框

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';

class ModalExample extends Component {
  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}