React Native常用组件-展示组件

2024/5/27 23:02:37

本文主要是介绍React Native常用组件-展示组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

View

View 是一个用于布局的容器组件,style属性用于设置View的样式,支持FlexBox布局。
在web环境,相当于div的角色。

例子:

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

const Example = () => {
  return (
    <View style={styles.container}>
      <Text>你好</Text>
    </View>
    );
};
  

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

export default Example;

Text

用于显示文本信息的组件。

例子:

import React from 'react';
import { Text } from 'react-native';

const Example = () => {
  return <Text style={styles.headerOrgText}>你好</Text>    
}
    

const styles = StyleSheet.create({
  headerOrgText: {
    fontSize: 16,
    color: '#FFFFFF',
    marginRight: 5,
  },
});

export default Example;

Image

用于显示不同格式的图片,包括网络图片、静态资源等。

例子:

import React from 'react';
import { Image } from 'react-native';
import ArrowRightIcon from 'src/assets/images/arrow_icon.png'

const Example = () => {
  return <Image style={styles.arrowImage} source={ArrowRightIcon} />
};

const styles = StyleSheet.create({
  arrowImage: {
    marginRight: 15,
    height: 11,
    width: 7,
  },
});

export default Example;

TextInput

允许用户输入文本数据的组件。

常用的属性:

  • placeholder:文本输入之前将呈现的字符串,多用于提示用户应该输入什么
  • placeholderTextColor:文本输入之前将呈现的字符串的颜色
  • multiline:如果为true,则文本输入可以是多行的,默认值为false
  • maxLength:最多允许用户输入多少字符
  • value:文本框中的文字内容

常用的事件:

  • onChangeText:当输入框的内容发生变化时,就会调用onChangeText,返回值是修改后的文本值text
  • onChange:当输入框的内容发生变化时,也会调用onChange,只不过它所返回的参数是一个event

例子:

import React, { useState } from 'react';
import { TextInput } from 'react-native';

const Example = () => {
  const [value, setValue] = useState('');

  return (
    <TextInput
      style={[styles.plainTextContent, { fontSize: 16 }]}
      placeholder="请填写内容,500字以内"
      placeholderTextColor="#999999"
      value={visitContent}
      multiline
      maxLength={500}
      onChangeText={text => {
        console.log(text)
      }}
    />
  );
};

const styles = StyleSheet.create({
  plainTextContent: {
    flex: 1,
    color: '#999999',
    marginLeft: 30,
    paddingTop: 0,
    paddingBottom: 0,
    textAlignVertical: 'center',
  },
});

export default Example;

Switch

一个切换组件,可用于显示开/关状态。
该组件只有两个值true和false,true表示开状态,false表示关状态(默认值)。
如下图所示:

图片描述

常用的属性:

  • disabled:设置Switch是否可以点击
  • value:设置Switch状态,默认false

常用的事件:

  • onValueChange:当Switch的状态发生变化时,就会调用onValueChange,返回值是修改后的布尔值
  • onChange:当Switch的状态发生变化时,也会调用onChange,只不过它所返回的参数是一个event

例子:

import React, { useState } from 'react';
import { View, Switch } from 'react-native';

const Example = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View>
      <Switch
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
};

export default Example;

StyleSheet

提供了一种类似CSS样式表的方式来定义组件的样式。
但是RN中的样式与CSS中是不同的:

  1. RN中使用JavaScript来写样式,因此文件名通常为xx.ts或者xx.js等
  2. 样式名采用驼峰命名,例如将background-color改为backgroundColor
  3. 为了兼容不同的分辨率,RN中的尺寸都是没有单位的,例如fontSize: 14

定义好的样式,通常采用对象或者数组的形式引入到组件中:

例子:

import React from 'react';
// 引入 StyleSheet
import { View, StyleSheet } from 'react-native';
// 使用组件的style属性,以对象的形式引入样式
const Example = () => <View style={styles.container}></View>;

// 通过 create() 方法创建样式表
const styles = StyleSheet.create({
  container: {
    padding: 20,
    borderRadius: 5,
  },
});

export default Example;

如果通过数组的形式引入样式,那么数组的后一项样式会覆盖前一项的样式。

<View style={[styles.container, props.style]}></View>


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


扫一扫关注最新编程教程