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>