react-native学习笔记(1) - 内置组件的基本使用以及推荐的第三方组件

stylesheet语法

• stylesheet是rn中的样式表属性,我们可以认为是Vue组件中的style标签里面的内容

//定义样式
var styles = StyleSheet.create({
  container:{
    marginTop:25,
    marginLeft:30,
    backgroundColor:"red",
    width:300,
    height:400
  },
  top:{
    backgroundColor:"green",
    height:250,
    margin:10,
  },
  bottom:{
    backgroundColor:"yellow",
    height:110,
    margin:10,
  },
  border:{
    borderWidth:3,
    borderColor:"black",
  }
});

响应式布局

• 因为是移动端开发,因此在rn中没有所谓的数据单位,也就是我们在h5中的px或者是rem等…但是我们可以使用rn内置的属性去获取当前屏幕的宽高(Dimension)

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.items}>
          <Text>首页</Text>
        </View>
        <View style={styles.items}>
          <Text>个人信息</Text>
        </View>
        <View style={styles.items}>
          <Text>扫一扫</Text>
        </View>
        <View style={styles.items}>
          <Text>关于页</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  items:{
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'skyblue',
    width: Dimensions.get('window').width/4,// 可以通过Dimensions来获取页面的宽高
    height: 90,
  }
})

RN的核心组件

1. View和Text(不多赘述)

• 官方文档

• 我们可以认为是h5端开发中的div标签,text标签则是h5中的p标签

2. Alert和Button

• 这两个组件与h5端的还是非常的相似的,直接看代码

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

export default class App extends Component {
  // 创建一个Alert 函数 弹出
  createAlert = ()=>{
    Alert.alert(
      '标题',
      '内容',
      [
        {
          text:'取消',//下方按钮标题
          onPress: ()=>{// 设置点击事件
            console.log('取消')
          },
          style:'cancel',// 样式
        },
        {
          text:'确认',//下方按钮标题
          onPress: ()=>{// 设置点击事件
            console.log('确认')
          },
          style:'conform',// 样式
        },
      ]
    )
  }
  render() {
    return (
      <View style={styles.container}>
        {/* Button组件 
            核心功能: 
              title(按钮文字) , 
              color(按钮颜色) , 
              onPress(点击事件,相当于click) */}
        <Button 
          title='按钮1'
          color={'#999'}
          onPress={()=>{
            alert('按钮1被点击了!')
          }}
        />

        {/* Alert组件 
            核心功能: 
              alert: 里面接受一些数据*/}
        <Button 
          title='按钮2'
          color={'#333'}
          onPress={()=>{
            this.createAlert()
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  items:{
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'skyblue',
    width: Dimensions.get('window').width/2,// 可以通过Dimensions来获取页面的宽高
    height: 90,// 可以通过Dimensions来获取页面的宽高
  }
})

3. switch和statusbar

• switch组件就相当于我们使用组件库时的开关,手机上面的基本一致, 而statusBar就是手机上面的状态栏

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

export default class App extends Component {
    state = {
        hiddenState : false
    }
  render() {
    return (
      <View>
        {/* 状态栏组件:
            核心属性:
            1. hidden(是否隐藏,布尔值)
            2. backgroundColor(背景色, 字符串),仅安卓有效
            3. barStyle(三种属性,小图标的样式)
        */}
        <StatusBar 
            hidden={this.state.hiddenState}
            backgroundColor={'yellowgreen'}
            barStyle={'dark-content'}
        />

        {/* 开关组件:
            核心属性:
            1. trackColor(设置开关状态的颜色)
            2. thumbColor(设置开关上面的圆点颜色)
            3. value(双向绑定的属性)
            4. onValueChange(相当于点击事件,用于捕获双向绑定数据发生变化时的回调)
        */}
        <Switch
            trackColor={{false:'red',true:'green'}}
            thumbColor={this.state.hiddenState?'yellowgreen':'white'}
            value={this.state.hiddenState}
            onValueChange={()=>{
                this.setState({
                    hiddenState:!this.state.hiddenState
                })
            }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({})

4. activityIndicator(加载中状态)

• 相当于加载中….

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

export default class App extends Component {
  render() {
    return (
      <View>
        {/* 
            ActivityIndicator(加载动画),在安卓和ios中均会有不同的状态
            核心属性:
            1. color(颜色,接受字符串形式)
            2. size(大小,如'large','small'等,在安卓中会可以设置数字来限制大小)
        */}
        <ActivityIndicator 
            color={'skyblue'}
            size={'large'}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({})

5. platform(判断当前机器的平台)

• 顾名思义,platform就是平台的意思,可以通过它对应的属性来判断当前的运行平台

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

export default class App extends Component {
    /* 
        Platform(平台判断)
        核心属性:
        1. OS(用于判断当前的平台,包含两个属性,'android'以及'ios')
    */
    A = ()=>{
        if (Platform.OS === 'android') {
            console.log('当前平台是安卓');
        }
    }
  render() {
    return (
      <View />
    )
  }
}

6. Image组件(图片展示组件)

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

export default function App() {
  return (
    <View>
      <Text>图片展示</Text>
      {/* 
        图片展示不外乎三种
            1. 本地图片,直接展示本地资源,路径
            2. 网络图片,也就是网址
            3. base64数据

         2. 核心属性:
            1. style(我们可以给它设置属性,行内样式或者styleSheet均可)
            2. source(图片路径)
      */}
        {/* 1. 展示本地图片 */}
        <Image
            source={require('./img/1.png')}
        />

        {/* 2. 展示网络图片 */}
        <Image
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
        {/* 3. 展示base64格式数据(需要拼接前缀) */}
        <Image
            source={{
                uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
                }}
        />
    </View>
  )
}

7. ImageBackground相当于h5中的div添加bgi属性

import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";

const image = { uri: "https://zh-hans.reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

8. TextInput(文本输入框)

import { StyleSheet, Text, View, TextInput } from 'react-native'
import {React,useState} from 'react'

export default function App() {
    const [myValue,setMyValue] = useState('')// 设置一个属性用于绑定文本输入框,默认值为空
    return (
        <View>
            <Text>文本输入框</Text>

            {/* 
                核心属性:
                1. style(可以自定义设置属性)
                2. placeholder(默认展示文本)
                3. value(指定展示的内容)
                4. onChangeText(函数,当输入框内容发生变化是触发)
                5. secureTextEntry(译为安全文本输入,一般用于密码框,布尔值)
                6. keyboardType(限制键盘的弹出类型,'number-pad',限制只弹出数字键盘)
                7. multiline(支持多行输入,类似文本域,一般结合numberOfLine来使用)
                8. numberOfLine(限制几行文本,接受数字)       
            */}
            <TextInput
                placeholder='请输入密码'
                value={myValue}
                onChangeText={(val)=>{
                    setMyValue({myValue:val})
                }}
                secureTextEntry={true}
                keyboardType={'number-pad'}
                multiline={true}
                numberOfLines={5}
            />
        </View>
    )
}

9. Touchable(类似于Button组件)

import { StyleSheet, Text, View ,TouchableHighlight,TouchableOpacity,TouchableWithoutFeedback} from 'react-native'
import React from 'react'

export default function App() {
  return (
    <View>
      <Text>按键组件(touch)</Text>
      {/* 
        按键组件(touchable)分三个
        1. TouchableHighlight(点击高亮)
        2. TouchableOpacity(点击透明)
        3. TouchableWithoutFeedback(点击无反馈)
            核心属性:
            1. onPress(点击事件,回调函数)
      */}

      {/* 1. 点击高亮 */}
      <TouchableHighlight
        onPress={()=>{
            console.log('按钮被点击了!');
        }}
      >
        <View>
            <Text>点击高亮</Text>
        </View>
      </TouchableHighlight>

      {/* 1. 点击透明 */} 
      <TouchableOpacity>
        <View>
            <Text>点击透明</Text>
        </View>
      </TouchableOpacity>

      {/* 1. 点击无反馈 */}
      <TouchableWithoutFeedback>
        <View>
            <Text>点击无反馈</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  )
}

9. ScrollView以及SafeAreaView

• 前者是可滑动视图,相当于默认配置了内容超出可滑动属性的(overflow:'scroll')div或者View,后者则是当当前设备手机存在刘海屏时,SafeAreaView则会自动的将内容顶在刘海的下边从而不让刘海挡住内容

import { StyleSheet, Text, View, ScrollView,SafeAreaView ,Platform} from 'react-native'
import React from 'react'

export default function App() {
  return (
    // ScrollView常用属性:
    /*
        1. style(可自定义属性,整体样式)
        2. contentContainerStyle(内容区域样式)
        3. showsHorizontalScrollIndicator(隐藏滚动条,水平也是如此)
    */
    <ScrollView
        contentContainerStyle={{padding:20}}
        showsHorizontalScrollIndicator={false}
    >
        <View>
            <Text>06ScrollViwe以及SafeAreaView</Text>
        </View>
        {/* 
            安卓设备使用 ScrollView 存在一个问题,就是
            内容过长时, ScrollView无法滚动到底部以至于
            内容无法完全展示,解决方法如下,使用Platform判断
            当前平台,若是安卓,则给内容下的View设置一个高度
        */}
        <View style={{height: Platform.OS === 'ios'?100:0}}></View>
    </ScrollView>
  )
}

10 Model

• Model模块相当于弹出框,常用的属性有下:

1. animationType ：设置Modal的出现方式，有3个参数

slide ：从底部弹出
fade ： 淡入视野
none： 出现没有动画

2. onRequestClose ：Modal关闭时调用此方法 (在Android平台上，这是一个必需的方法)

使用 ： onRequestClose={() => console.log('onRequestClose...')}

3. onShow ： 当modal显示时，可以传递一个函数用来调用

4. transparent ：使Modal的背景色透明

5. visible : 用来控制Modal是否可见 ture / false

代码展示:

/* 弹框结合动画一起展示 */
 
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Animated,
    Easing,
    Modal,
    Button,
    TouchableOpacity
} from 'react-native';
 
export default class Swiper extends Component {
 
    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(15),  //设置动画初始值
            modal: false,// 设置弹框默认关闭
        }
    }
 
    render() {
        return (
            <View style={styles.container}>
                <Animated.Text style={{fontSize: this.state.fadeAnim}}>
                    Welcome my react-native !</Animated.Text>
 
                <Button title='显示modal' onPress={() => this.setState({
                    modal: !this.state.modal
                })}/>
                <Modal
                    animationType={'slide'}
                    transparent={true}
                    onRequestClose={() => console.log('onRequestClose...')}
                    visible={this.state.modal}
                >
                    <TouchableOpacity
                        onPress={() => this.setState({
                            modal: false
                        })}
                        style={{
                            flex: 1,
                            justifyContent: 'center',
                            alignItems: 'center'
                        }}>
                        <View style={{
                            position: 'absolute',
                            bottom: 0,
                            width: 500,
                            backgroundColor: 'grey',
                            alignItems:'center'
                        }}>
                            <Text style={{height: 50}}>Hide Modal</Text>
                            <Text style={{height: 50}}>Hide Modal</Text>
                        </View>
                    </TouchableOpacity>
 
                </Modal>
            </View>
        );
    }
 
    componentDidMount() {
        Animated.timing(
            this.state.fadeAnim,  //初始值
            {
                toValue: 22,            //结束值
                duration: 2000,        //动画时间
                easing: Easing.linear,
            },
        ).start();               //开始
    }
}

第三方组件推荐

• 由于react-native内置的组件往往是不足以支撑我们的业务逻辑的,例如下拉列表,图片上传等..尽管有组件库的存在,但是我们还是需要第三方组件来加持的!

1. WebView(可渲染原生的html,css,js)

• 官方文档

2. Picker(下拉框)

• 官方文档

3. Swiper(轮播图)

• 官方文档

4. AsyncStorage(相当于localStorage,做数据持久化)

• 官方文档

5. Geolocation(获取定位信息)

• 官方文档

6. Camera(调用摄像头)

• 官方文档

ImagePicker(图片选择)

• 官方文档