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 组件上
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 及以上版本。为视图添加一个投影，并且会影响视图层叠的顺序
必需属性 title：string，按钮内显示的文本 onPress：({ nativeEvent: PressEvent })，用户点击按钮时所调用的处理函数
可选属性 disabled：bool，设置为 true 时此按钮不可点击
启动一个提示对话框，包含对应的标题和信息
在 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，创建一个带表单输入内容的提示框
属性
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，当值改变的时候调用此回调函数，参数为事件
属性：
size：enum('small', 'large')，指示器的大小，默认为 'small'。还可以在 Android 上设定具体的数值
color：滚轮的前景颜色
animating：bool，是否要显示指示器动画，默认为 true 表示显示，false 表示隐藏
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,const,Text,React,按钮,组件,import,Native 来源： https://www.cnblogs.com/rogerwu/p/16666530.html