Javascript

React Native 组件介绍(一)

本文主要是介绍React Native 组件介绍(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Text 一个用于显示文本的 React 组件,支持嵌套、样式、以及触摸处理
style 属性 color: 基本同 css 写法 fontSize: number 类型 fontStyle: enum('normal', 'italic') fontFamily: string,只接受一种字体名称 fontWeight: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') lineHeight: number 类型 letterSpacing: number 类型 textAlign: enum('auto', 'left', 'right', 'center', 'justify'<仅 iOS 和 Android>=8.0 支持>) textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')

容器 在 Text 内部的元素不再使用 flexbox 布局,而是采用文本布局,也就是说,Text 内部的元素不再是一个个的矩形,而是在尾部换行
嵌套 文本节点必须放在 Text 组件内,不能直接放在 View 组件内

样式继承限制 在 Web 上,很多属性(例如:字体相关)都可以从父元素继承;RN 中的继承只发生在 Text 组件上
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';

const tangPoetry = (
  <>
    <Text>清明时节雨纷纷,</Text>
    <Text>路上行人欲断魂。</Text>
    <Text>借问酒家何处有,</Text>
    <Text>牧童遥指杏花村</Text>
  </>
);
export default function index() {
  return (
    <View>
      {/* view container */}
      <View>{tangPoetry}</View>
      {/* text container */}
      <Text>{tangPoetry}</Text>
      {/* 嵌套文本 */}
      <Text style={styles.baseText}>
        总金额:
        <Text style={styles.innerText}>¥3999</Text>
      </Text>
      {/* view 中直接放一段文本 */}
      {/* <View>view中直接放文本(错误)</View> */}
      {/* Render Error: Text strings must be rendered width a <Text> component */}
      {/* 查看view样式继承 */}
      <View style={{fontSize: 30, color: 'geekblue'}}>
        <Text>查看 View 组件的样式能否继承</Text>
      </View>
      {/* 继承只发生在 Text 组件上 */}
      <Text style={{fontSize: 30, color: 'lightblue'}}>
        <Text>继承只发生在 Text 组件上</Text>
        <Text>观察字体的大小和颜色变化</Text>
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  baseText: {
    fontWeight: '600',
  },
  innerText: {
    color: 'tomato',
  },
});

 

View 创建 UI 时最基础的组件,支持 flexbox 布局、样式、触摸响应和一些无障碍的内容
style 属性 边框颜色:borderColor | borderRightColor | borderLeftColor | borderTopColor | borderBottomColor 边框宽度:borderWidth | borderRightWidth | borderLeftWidth | borderTopWidth | borderBottomWidth 边框圆角:borderRadius | borderBottomLeftRadius | borderBottomRightRadius | borderTopLeftRadius | borderTopRightRadius 边框样式:borderStyle <enum('solid', 'dotted', 'dashed')> 透明度:opacity <number> 投影:elevation <number> 此属性仅支持 Android5.0 及以上版本。为视图添加一个投影,并且会影响视图层叠的顺序
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';

export default function index() {
  return (
    <View style={styles.container}>
      <View style={styles.top} />
      <View style={styles.middle} />
      <View style={styles.bottom} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    justifyContent: 'space-between',
    backgroundColor: '#fff',
    padding: 20,
  },
  top: {
    flex: 0.3,
    backgroundColor: 'grey',
    borderWidth: 5,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  middle: {
    flex: 0.3,
    backgroundColor: 'beige',
    borderWidth: 5,
  },
  bottom: {
    flex: 0.3,
    backgroundColor: 'pink',
    borderWidth: 5,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
});

 

Button
必需属性 title:string,按钮内显示的文本 onPress:({ nativeEvent: PressEvent }),用户点击按钮时所调用的处理函数
可选属性 disabled:bool,设置为 true 时此按钮不可点击
import {View, Button, Alert} from 'react-native';
import React from 'react';

export default function index() {
  return (
    <View style={{height: 200, padding: 20, justifyContent: 'space-between'}}>
      <Button title="确认" onPress={() => Alert.alert('被点击了')} />
      <Button title="取消" color="tomato" onPress={() => alert('点击了取消')} />
      <Button title="禁用" disabled />
    </View>
  );
}

 

Alert
启动一个提示对话框,包含对应的标题和信息
在 Android 上最多能指定三个按钮,如:确定、取消、稍后再说
在 iOS 上可以指定任意数量的按钮,每个按钮还都可以指定自己的样式和提示类别
方法 alert() static alert(title, message?, buttons?, options?)
title:string,必填 提示框的标题,取值为 null 或 空字符串 可以隐藏标题 message:string,可选 提示框标题下展示的一段信息 buttons:Button[] options:仅限于 Android   -- cancelable:boolean,默认值为 false,设为 true 时点击提示框的外面可以取消提示框   -- onDismiss:function,用来捕获用户的取消操作
prompt() static prompt(title, message?, callbackOrButtons?, type?, defaultValue?, keyboardType?)
仅用于 iOS,创建一个带表单输入内容的提示框
import {StyleSheet, Text, View, Button, Alert} from 'react-native';
import React from 'react';

export default function index() {
  const showAlertOne = () => {
    Alert.alert('温馨提示1', '查看提示框消息', [
      {text: '确认', onPress: () => console.log('点击确认按钮的回调函数')},
    ]);
  };
  const showAlertTwo = () => {
    Alert.alert('温馨提示2', '查看提示框消息', [
      {text: '确认', onPress: () => console.log('点击确认按钮的回调函数')},
      {text: '取消', onPress: () => console.log('点击取消按钮的回调函数')},
    ]);
  };
  const showAlertThree = () => {
    Alert.alert('温馨提示3', '查看提示框消息', [
      {text: '再看看', onPress: () => console.log('点击再看看按钮的回调函数')},
      {text: '确认', onPress: () => console.log('点击确认按钮的回调函数')},
      {text: '取消', onPress: () => console.log('点击取消按钮的回调函数')},
    ]);
  };
  return (
    <View style={{height: '100%', padding: 20, justifyContent: 'space-around'}}>
      <Button title="一个按钮" color="chocolate" onPress={showAlertOne} />
      <Button title="两个按钮" color="cornflowerblue" onPress={showAlertTwo} />
      <Button title="三个按钮" color="crimson" onPress={showAlertThree} />
    </View>
  );
}

 

StatusBar 控制应用状态栏的组件 StatusBar 可以在任意视图中加载,可以放置多个,后加载的会覆盖先加载的
属性
hidden:bool,是否隐藏状态栏 backgroundColor:color,状态栏的背景色。仅用于 Android barStyle:enum('default', 'light-content', 'dark-content'),设置状态栏文本的颜色,Android 上此属性仅对 6.0 及以上版本生效 animated:bool,指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式:backgroundColor,barStyle 和 hidden

Switch 跨平台通用的开关组件 这是一个受控组件,必须使用 onValueChange 回调来更新 value 属性以响应用户的操作
属性
disabled:bool,默认值为 false,是否禁用此组件的交互 thumbColor:color,开关上圆形按钮的背景颜色 trackColor:object: { false: color, true: color },关闭状态时的边框颜色(iOS)或背景颜色(Android) value:bool,默认值为 false,表示此开关是否打开 onValueChange:function,当值改变的时候调用此回调函数,参数为新的值 onChange:function,当值改变的时候调用此回调函数,参数为事件  
import {View, Text, StatusBar, Switch} from 'react-native';
import React, {useState} from 'react';

export default function index() {
  const [hideStatusBar, setHideStatusBar] = useState(false);
  const toggleStatusBar = () => {
    setHideStatusBar(!hideStatusBar);
  };
  return (
    <View style={{alignItems: 'flex-start'}}>
      <StatusBar
        hidden={hideStatusBar}
        animated
        backgroundColor="#09b807"
        barStyle="dark-content"
      />
      <Switch
        value={hideStatusBar}
        thumbColor={hideStatusBar ? '#f5dd4b' : '#f4f'}
        trackColor={{false: '#767577', true: '#81b0ff'}}
        onValueChange={toggleStatusBar}
      />
    </View>
  );
}

 

  ActivityIndicator 显示一个圆形的 loading 提示符号
属性:
size:enum('small', 'large'),指示器的大小,默认为 'small'。还可以在 Android 上设定具体的数值
color:滚轮的前景颜色
animating:bool,是否要显示指示器动画,默认为 true 表示显示,false 表示隐藏  
import {View, ActivityIndicator, StyleSheet} from 'react-native';
import React from 'react';

export default function index() {
  return (
    <View style={[styles.container]}>
      <ActivityIndicator />
      <ActivityIndicator size="large" />
      <ActivityIndicator size="small" color="#0000ff" />
      <ActivityIndicator size="large" color="#00ff00" />
      {/* 数字指定大小,只在 Android 应用下有效 */}
      <ActivityIndicator color="tomato" size={70} />
      <ActivityIndicator color="pink" size={100} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    padding: 20,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
});

 

这篇关于React Native 组件介绍(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!