入门
macOS 安装 iOS 环境
您将需要 Node、Watchman、React Native 命令行界面、Ruby 版本管理器、Xcode 和 CocoaPods
$ brew install node # Node 14 或更新版本
$ brew install watchman
使用 .ruby-version
文件来确保您的 Ruby 版本与所需的一致
$ ruby --version
# ruby 2.7.5
创建一个新的应用程序
$ npx react-native init MyApp
# 指定 React Native 版本创建
$ npx react-native init MyApp \
--version X.XX.X
# 创建 typescript 版本项目
$ npx react-native init MyTSApp \
--template react-native-template-typescript
安装依赖
$ yarn install # 根目录运行
$ cd ios # 进入 ios 目录
$ bundle install # 安装 Bundler
$ bundle exec pod install # 以安装 iOS 依赖项
运行你的 React Native 应用程序
# 启动监听打包 JS 服务,默认端口 8081
$ npx react-native start
# 指定 8088 端口
$ npx react-native start --port=8088
# 启动 iOS 模拟器运行你的应用
$ npx react-native run-ios
:- | -- |
---|---|
⇧ + ⌘ + 2
|
设备窗格 |
⌘ + R
|
构建并运行 |
摇动您的设备 |
打开 |
macOS 安装 Android 环境
您将需要 Node、Watchman、React Native 命令行界面、JDK 和 Android Studio
$ brew install node # Node 14 或更新版本
$ brew install watchman
我们建议使用 Homebrew 安装名为 Azul Zulu 的 OpenJDK 发行版,发行版为 Intel 和 M1 Mac 提供 JDK
$ brew tap homebrew/cask-versions
$ brew install --cask zulu11
下载安装 Android Studio
- Android SDK
- Android SDK Platform
- Android Virtual Device
安装安卓SDK,React Native 应用需要 Android 12 (S) SDK,通过 Android Studio 中的 SDK 管理器安装其他 Android SDK
SDK 管理器也可以在 Android Studio “Preferences” 对话框中找到,位于 Appearance & Behavior → System Settings → Android SDK
Android SDK Platform 31
-
Intel x86 Atom_64 System Image
或Google APIs Intel x86 Atom System Image
或 (for Apple M1 Silicon)Google APIs ARM 64 v8a System Image
接下来,选择 SDK Tools
选项卡并选中 Show Package Details
旁边的复选框。 查找并展开 Android SDK Build-Tools
条目,然后确保选择了 Apply
下载并安装 Android SDK
及相关构建工具
配置 ANDROID_SDK_ROOT 环境变量
将以下行添加到您的 $HOME/.bash_profile
或 $HOME/.bashrc
(如果您使用的是 zsh,则为 ~/.zprofile
或 ~/.zshrc
)配置文件:
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
创建一个新的应用程序
$ npx react-native init MyApp
# 指定 React Native 版本创建
$ npx react-native init MyApp --version X.XX.X
# 创建 typescript 版本项目
$ npx react-native init MyTSApp --template react-native-template-typescript
安装依赖
$ yarn install # 根目录运行
使用虚拟设备
- 使用 Android Studio 打开
./AwesomeProject/android - 从 Android Studio 中打开 AVD 管理器 来查看可用的 Android 虚拟设备 (AVD) 列表
- 第一次,您可能需要创建一个新的 AVD。选择 Create Virtual Device...,然后从列表中选择任何电话并单击“下一步”,然后选择 S API Level 31 image。
运行你的 React Native 应用程序
# 启动监听打包 JS 服务
$ npx react-native start
# 启动 iOS 模拟器运行你的应用
$ npx react-native run-ios
打开 React Native Debug 菜单
:- | -- |
---|---|
⌘ + M (Android) |
打开 |
⌘ + D (iOS) |
打开 |
Ctrl + D (Linux) |
打开 |
打开 |
|
按两次 R 键 |
构建并运行 |
基本组件
View
import React from "react";
import { View, Text } from "react-native";
export default function ViewExample() {
return (
<View
style={{
backgroundColor: "red",
flex: 0.5
}}
/>
);
};
构建 UI 的最基本组件
Text
import React from 'react';
import { Text } from 'react-native';
import { StyleSheet } from 'react-native';
export default function BoldBeautiful() {
return (
<Text style={styles.baseText}>
我是粗体
<Text style={styles.innerText}>
和红色
</Text>
</Text>
);
};
const styles = StyleSheet.create({
baseText: { fontWeight: 'bold' },
innerText: { color: 'red' }
});
用于显示文本的组件
TextInput
import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";
export default function UseTextInput() {
const [
text, onChangeText
] = React.useState("Useless Text");
return (
<SafeAreaView>
<TextInput
onChangeText={onChangeText}
value={text}
/>
</SafeAreaView>
);
};
用于通过键盘将文本输入应用程序的组件
Image
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: { paddingTop: 50, },
tinyLogo: { width: 50, height: 50, },
logo: { width: 66, height: 58, },
});
const DisplayAnImage = () => {
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
<Image
style={styles.tinyLogo}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
<Image
style={styles.logo}
source={{
uri: 'data:image/png;base64,iVBORw0K.....',
}}
/>
</View>
);
}
export default DisplayAnImage;
用于显示图像的组件
ScrollView
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
export const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
提供一个可以承载多个组件和视图的滚动容器
StyleSheet
import React from "react";
import { StyleSheet, Text, View } from "react-native";
export const App = () => (
<View style={styles.container}>
<Text style={styles.title}>
React Native
</Text>
</View>
);
const styles = StyleSheet.create({
container: {
padding: 24,
backgroundColor: "#eaeaea"
},
title: {
backgroundColor: "#61dafb",
color: "#20232a",
textAlign: "center",
}
});
提供类似于 CSS 样式表的抽象层
用户界面
Button
import { Button } from "react-native";
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="了解紫色按钮的更多信息"
/>
一个基本的按钮组件,用于处理应该在任何平台上都能很好地呈现的触摸
Switch
import { Switch } from "react-native";
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
呈现布尔输入
列表视图
SectionList
import React from "react";
import {
StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar
} from "react-native";
const DATA = [
{
title: "Main dishes",
data: ["Pizza", "Burger", "Risotto"]
},
{
title: "Sides",
data: ["French Fries", "Onion Rings", "Fried Shrimps"]
},
{
title: "Drinks",
data: ["Water", "Coke", "Beer"]
},
{
title: "Desserts",
data: ["Cheese Cake", "Ice Cream"]
}
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
marginHorizontal: 16
},
item: {
backgroundColor: "#f9c2ff",
padding: 20,
marginVertical: 8
},
header: { fontSize: 32, backgroundColor: "#fff" },
title: { fontSize: 24 }
});
export default App;
FlatList
import React from 'react';
import {
SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar
} from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
Android 组件和 API
BackHandler
import React, { useEffect } from "react";
import {
Text, View, StyleSheet, BackHandler, Alert
} from "react-native";
const App = () => {
useEffect(() => {
const backAction = () => {
Alert.alert("Hold on!", "你确定要回去吗?", [
{
text: "Cancel",
onPress: () => null,
style: "cancel"
},
{ text: "YES", onPress: () => BackHandler.exitApp() }
]);
return true;
};
const backHandler = BackHandler.addEventListener(
"hardwareBackPress",
backAction
);
return () => backHandler.remove();
}, []);
return (
<View style={styles.container}>
<Text style={styles.text}>点击后退按钮!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
text: {
fontSize: 18,
fontWeight: "bold"
}
});
export default App;
检测硬件按钮按下以进行后退导航
DrawerLayoutAndroid
import React, { useRef, useState } from "react";
import {
Button, DrawerLayoutAndroid, Text, StyleSheet, View
} from "react-native";
const App = () => {
const drawer = useRef(null);
const [drawerPosition, setDrawerPosition] = useState("left");
const changeDrawerPosition = () => {
if (drawerPosition === "left") {
setDrawerPosition("right");
} else {
setDrawerPosition("left");
}
};
const navigationView = () => (
<View style={[styles.container, styles.navigationContainer]}>
<Text style={styles.paragraph}>I'm in the Drawer!</Text>
<Button
title="Close drawer"
onPress={() => drawer.current.closeDrawer()}
/>
</View>
);
return (
<DrawerLayoutAndroid
ref={drawer}
drawerWidth={300}
drawerPosition={drawerPosition}
renderNavigationView={navigationView}
>
<View style={styles.container}>
<Text style={styles.paragraph}>
Drawer on the {drawerPosition}!
</Text>
<Button
title="Change Drawer Position"
onPress={() => changeDrawerPosition()}
/>
<Text style={styles.paragraph}>
Swipe from the side or press button below to see it!
</Text>
<Button
title="Open drawer"
onPress={() => drawer.current.openDrawer()}
/>
</View>
</DrawerLayoutAndroid>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
padding: 16
},
navigationContainer: {
backgroundColor: "#ecf0f1"
},
paragraph: {
padding: 16,
fontSize: 15,
textAlign: "center"
}
});
export default App;
在 Android 上呈现 DrawerLayout
PermissionsAndroid
import React from "react";
import {
Button, PermissionsAndroid,
SafeAreaView, StatusBar, StyleSheet, Text, View
} from "react-native";
const requestCameraPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "Cool Photo App Camera Permission",
message:
"Cool Photo App needs access to your camera " +
"so you can take awesome pictures.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the camera");
} else {
console.log("Camera permission denied");
}
} catch (err) {
console.warn(err);
}
};
const App = () => (
<View style={styles.container}>
<Text style={styles.item}>Try permissions</Text>
<Button
title="request permissions"
onPress={requestCameraPermission}
/>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: StatusBar.currentHeight,
backgroundColor: "#ecf0f1",
padding: 8
},
item: {
margin: 24,
fontSize: 18,
fontWeight: "bold",
textAlign: "center"
}
});
export default App;
提供对 Android M 中引入的权限模型的访问
ToastAndroid
import React from "react";
import {
View, StyleSheet, ToastAndroid, Button, StatusBar
} from "react-native";
const App = () => {
const showToast = () => {
ToastAndroid.show("一只皮卡丘出现在附近!", ToastAndroid.SHORT);
};
const showToastWithGravity = () => {
ToastAndroid.showWithGravity(
"All Your Base Are Belong To Us",
ToastAndroid.SHORT,
ToastAndroid.CENTER
);
};
const showToastWithGravityAndOffset = () => {
ToastAndroid.showWithGravityAndOffset(
"A wild toast appeared!",
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
25,
50
);
};
return (
<View style={styles.container}>
<Button title="Toggle Toast" onPress={() => showToast()} />
<Button
title="Toggle Toast With Gravity"
onPress={() => showToastWithGravity()}
/>
<Button
title="Toggle Toast With Gravity & Offset"
onPress={() => showToastWithGravityAndOffset()}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: StatusBar.currentHeight,
backgroundColor: "#888888",
padding: 8
}
});
export default App;
创建 Android Toast 警报
iOS 组件和 API
ActionSheetIOS
import React, { useState } from "react";
import { ActionSheetIOS, Button, StyleSheet, Text, View } from "react-native";
const App = () => {
const [result, setResult] = useState("🔮");
const onPress = () =>
ActionSheetIOS.showActionSheetWithOptions(
{
options: ["Cancel", "Generate number", "Reset"],
destructiveButtonIndex: 2,
cancelButtonIndex: 0,
userInterfaceStyle: 'dark'
},
buttonIndex => {
if (buttonIndex === 0) {
// cancel action
} else if (buttonIndex === 1) {
setResult(Math.floor(Math.random() * 100) + 1);
} else if (buttonIndex === 2) {
setResult("🔮");
}
}
);
return (
<View style={styles.container}>
<Text style={styles.result}>{result}</Text>
<Button onPress={onPress} title="Show Action Sheet" />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
},
result: {
fontSize: 64,
textAlign: "center"
}
});
export default App;
其它
ActivityIndicator
import React from "react";
import {
ActivityIndicator, StyleSheet, Text, View
} from "react-native";
const App = () => (
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator />
<ActivityIndicator size="large" />
<ActivityIndicator size="small" color="#0000ff" />
<ActivityIndicator size="large" color="#00ff00" />
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
},
horizontal: {
flexDirection: "row",
justifyContent: "space-around",
padding: 10
}
});
export default App;
显示圆形加载指示器
Alert
import React, { useState } from "react";
import { View, StyleSheet, Button, Alert } from "react-native";
const App = () => {
const createTwoButtonAlert = () =>
Alert.alert( "Alert Title", "My Alert Msg",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
]
);
return (
<View style={styles.container}>
<Button title={"2-Button Alert"}
onPress={createTwoButtonAlert} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-around",
alignItems: "center"
}
});
export default App;
启动具有指定标题和消息的警报对话框
Animated
import React, { useRef } from "react";
import {
Animated, Text, View, StyleSheet, Button, SafeAreaView
} from "react-native";
const App = () => {
// fadeAnim 将用作不透明度的值。 初始值:0
const fadeAnim = useRef(new Animated.Value(0)).current;
const fadeIn = () => {
// 将在 5 秒内将 fadeAnim 值更改为 1
Animated.timing(fadeAnim, {
toValue: 1,
duration: 5000
}).start();
};
const fadeOut = () => {
// 将在 3 秒内将 fadeAnim 值更改为 0
Animated.timing(fadeAnim, {
toValue: 0,
duration: 3000
}).start();
};
return (
<SafeAreaView style={styles.container}>
<Animated.View
style={[
styles.fadingContainer,
{
// 将不透明度绑定到动画值
opacity: fadeAnim
}
]}
>
<Text style={styles.fadingText}>Fading View!</Text>
</Animated.View>
<View style={styles.buttonRow}>
<Button title="淡入淡出" onPress={fadeIn} />
<Button title="淡出视图" onPress={fadeOut} />
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
fadingContainer: {
padding: 20,
backgroundColor: "powderblue"
},
fadingText: { fontSize: 28 },
buttonRow: {
flexBasis: 100,
justifyContent: "space-evenly",
marginVertical: 16
}
});
export default App;
一个用于创建易于构建和维护的流畅、强大的动画的库
Dimensions
import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
提供获取设备尺寸的接口
KeyboardAvoidingView
import React from 'react';
import {
View, KeyboardAvoidingView, TextInput,
StyleSheet, Text, Platform,
TouchableWithoutFeedback, Button, Keyboard
} from 'react-native';
const KeyboardAvoidingComponent = () => {
return (
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.container}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.inner}>
<Text style={styles.header}>Header</Text>
<TextInput placeholder="用户名" style={styles.textInput} />
<View style={styles.btnContainer}>
<Button title="Submit" onPress={() => null} />
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
inner: {
padding: 24,
flex: 1,
justifyContent: "space-around"
},
header: { fontSize: 36, marginBottom: 48 },
textInput: {
height: 40,
borderColor: "#000000",
borderBottomWidth: 1,
marginBottom: 36
},
btnContainer: {
backgroundColor: "white",
marginTop: 12
}
});
export default KeyboardAvoidingComponent;
提供一个自动移出虚拟键盘的视图
Linking
import React, { useCallback } from "react";
import {
Alert, Button, Linking, StyleSheet, View
} from "react-native";
const supportedURL = "https://google.com";
const unsupportedURL = "slack://open?team=123456";
const OpenURLButton = ({ url, children }) => {
const handlePress = useCallback(async () => {
// 检查具有自定义 URL 方案的链接是否支持该链接。
const supported = await Linking.canOpenURL(url);
if (supported) {
// 打开某些应用程序的链接,如果 URL 方案是“http”,则应打开 Web 链接
// 通过手机中的某些浏览器
await Linking.openURL(url);
} else {
Alert.alert(`不知道如何打开这个网址: ${url}`);
}
}, [url]);
return <Button title={children} onPress={handlePress} />;
};
export default function App() {
return (
<View style={styles.container}>
<OpenURLButton url={supportedURL}>
打开支持的 URL
</OpenURLButton>
<OpenURLButton url={unsupportedURL}>
打开不支持的 URL
</OpenURLButton>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
});
提供一个通用接口来与传入和传出应用程序链接进行交互
Modal
import React, { useState } from "react";
import {
Alert, Modal, StyleSheet, Text, Pressable, View
} from "react-native";
const App = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("模态已关闭");
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<Pressable
style={[styles.button, styles.buttonOpen]}
onPress={() => setModalVisible(true)}
>
<Text style={styles.textStyle}>Show Modal</Text>
</Pressable>
</View>
);
};
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen: {
backgroundColor: "#F194FF",
},
buttonClose: {
backgroundColor: "#2196F3",
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText: {
marginBottom: 15,
textAlign: "center"
}
});
export default App;
提供一种在封闭视图上方呈现内容的简单方法
PixelRatio
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100)
});
<Image source={image} style={{ width: 200, height: 100 }} />;
提供对设备像素密度的访问
RefreshControl
import React from 'react';
import {
RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text
} from 'react-native';
const wait = (timeout) => {
return new Promise(resolve => setTimeout(resolve, timeout));
}
export default function App() {
const [refreshing, setRefreshing] = React.useState(false);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
wait(2000).then(() => setRefreshing(false));
}, []);
return (
<SafeAreaView style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
>
<Text>下拉看 RefreshControl 指标</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollView: {
flex: 1,
backgroundColor: 'pink',
alignItems: 'center',
justifyContent: 'center',
},
});
该组件在 ScrollView 内部使用,以添加下拉刷新功能
StatusBar
import React, { useState } from 'react';
import { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native';
const STYLES = ['default', 'dark-content', 'light-content'];
const TRANSITIONS = ['fade', 'slide', 'none'];
const App = () => {
const [hidden, setHidden] = useState(false);
const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
const [statusBarTransition, setStatusBarTransition] = useState(TRANSITIONS[0]);
const changeStatusBarVisibility = () => setHidden(!hidden);
const changeStatusBarStyle = () => {
const styleId = STYLES.indexOf(statusBarStyle) + 1;
if (styleId === STYLES.length) {
setStatusBarStyle(STYLES[0]);
} else {
setStatusBarStyle(STYLES[styleId]);
}
};
const changeStatusBarTransition = () => {
const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
if (transition === TRANSITIONS.length) {
setStatusBarTransition(TRANSITIONS[0]);
} else {
setStatusBarTransition(TRANSITIONS[transition]);
}
};
return (
<SafeAreaView style={styles.container}>
<StatusBar
animated={true}
backgroundColor="#61dafb"
barStyle={statusBarStyle}
showHideTransition={statusBarTransition}
hidden={hidden} />
<Text style={styles.textStyle}>
StatusBar Visibility:{'\n'}
{hidden ? 'Hidden' : 'Visible'}
</Text>
<Text style={styles.textStyle}>
StatusBar Style:{'\n'}
{statusBarStyle}
</Text>
{Platform.OS === 'ios' ? (
<Text style={styles.textStyle}>
StatusBar Transition:{'\n'}
{statusBarTransition}
</Text>
) : null}
<View style={styles.buttonsContainer}>
<Button
title="Toggle StatusBar"
onPress={changeStatusBarVisibility} />
<Button
title="Change StatusBar Style"
onPress={changeStatusBarStyle} />
{Platform.OS === 'ios' ? (
<Button
title="Change StatusBar Transition"
onPress={changeStatusBarTransition} />
) : null}
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ECF0F1'
},
buttonsContainer: {
padding: 10
},
textStyle: {
textAlign: 'center',
marginBottom: 8
}
});
export default App;
控制应用程序状态栏的组件
StyleSheet
StyleSheet
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
paragraph: {
fontSize: 16,
},
label: {
fontSize: 11,
textTransform: 'uppercase'
}
});
<Text style={styles.paragraph}>段落</Text>
<Text style={styles.label}>标签</Text>
StyleSheet 是一种抽象,它通过使用二维 JavaScript 对象接受 CSS 样式规则来替代 CSS
style 属性
<Text style={styles.paragraph} />
<Text style={{ fontSize: 16 }} />
<Text
style={[
styles.paragraph, { color: 'red' }
]}
/>
可以使用 style={}
属性设置组件的样式,该属性接受对象作为内联样式、样式表创建的样式定义或一组对象/定义来组成样式
使用样式表定义
// 使用内联样式
const AwesomeBox = () => (
<View style={{
width: 100, height: 100,
backgroundColor: 'red' }} />
);
// 使用样式表 API
const AwesomeBox = () => (
<View style={styles.box} />
);
const styles = StyleSheet.create({
box: {
width: 100,
height: 100,
backgroundColor: 'red'
},
});
动态样式
// 如果 props.isActive 为真 则在 `paragraph`
// 样式之上应用 `selected` 样式
function Item(props) {
return (
<Text style={[
styles.paragraph,
props.isActive && styles.selected
]} />
);
}
React Native 中的 Flex
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }} />
</View>
布局是用类似 Flex
的规则定义的,以适应各种屏幕尺寸。Web 上的 Flex
和 React Native 中的 Flex
之间的主要区别在于不需要带有 display: flex
的父元素
flexDirection
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }} />
</View>
flexDirection 样式属性确定子元素的布局方向和顺序,可以是row
、row-reverse
、column
或column-reverse
justifyContent
<View style={{
flexDirection: 'row',
justifyContent: 'flex-start'
}}>
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }} />
</View>
样式属性决定了子元素在父容器中的定位方式,可以是 center
、flex-start
、flex-end
、space-around
、space-between
或 space-evenly
。
React Native 中的尺寸
<View
style={{
width: 50,
height: 50,
backgroundColor: 'powderblue'
}}
/>
默认所有尺寸都是
Props
View Style Props
import React from "react";
import { View, StyleSheet } from "react-native";
export default function ViewStyle() {
return (
<View style={styles.container}>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
backgroundColor: "#fff",
},
});
:- | -- |
---|---|
backfaceVisibility |
# |
backgroundColor |
# |
borderBottomColor |
# |
borderBottomEndRadius |
# |
borderBottomLeftRadius |
# |
borderBottomRightRadius |
# |
borderBottomStartRadius |
# |
borderBottomWidth |
# |
borderColor |
# |
borderEndColor |
# |
borderLeftColor |
# |
borderLeftWidth |
# |
borderRadius |
# |
borderRightColor |
# |
borderRightWidth |
# |
borderStartColor |
# |
borderStyle |
# |
borderTopColor |
# |
borderTopEndRadius |
# |
borderTopLeftRadius |
# |
borderTopRightRadius |
# |
borderTopStartRadius |
# |
borderTopWidth |
# |
borderWidth |
# |
elevation Android
|
# |
opacity |
# |
Text Style Props
:- | -- |
---|---|
color |
# |
fontFamily |
# |
fontSize |
# |
fontStyle |
# |
fontWeight |
# |
includeFontPadding Android
|
# |
fontVariant |
# |
letterSpacing |
# |
lineHeight |
# |
textAlign |
# |
textAlignVertical Android
|
# |
textDecorationColor iOS
|
# |
textDecorationLine |
# |
textDecorationStyle iOS
|
# |
textShadowColor |
# |
textShadowOffset |
# |
textShadowRadius |
# |
textTransform |
# |
writingDirection iOS
|
# |
Layout Props
:- | -- |
---|---|
alignContent |
# |
alignItems |
# |
alignSelf |
# |
aspectRatio |
# |
borderBottomWidth |
# |
borderEndWidth |
# |
borderLeftWidth |
# |
borderRightWidth |
# |
borderStartWidth |
# |
borderTopWidth |
# |
borderWidth |
# |
bottom |
# |
direction |
# |
display |
# |
end |
# |
flex |
# |
flexBasis |
# |
flexDirection |
# |
flexGrow |
# |
flexShrink |
# |
flexWrap |
# |
height |
# |
justifyContent |
# |
left |
# |
margin |
# |
marginBottom |
# |
marginEnd |
# |
marginHorizontal |
# |
marginLeft |
# |
marginRight |
# |
marginStart |
# |
marginTop |
# |
marginVertical |
# |
maxHeight |
# |
maxWidth |
# |
minHeight |
# |
minWidth |
# |
overflow |
# |
padding |
# |
paddingBottom |
# |
paddingEnd |
# |
paddingHorizontal |
# |
paddingLeft |
# |
paddingRight |
# |
paddingStart |
# |
paddingTop |
# |
paddingVertical |
# |
position |
# |
right |
# |
start |
# |
top |
# |
width |
# |
zIndex |
# |
Image Style Props
<Image
style={{
resizeMode: "contain",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
:- | -- |
---|---|
backfaceVisibility |
# |
backgroundColor |
# |
borderBottomLeftRadius |
# |
borderBottomRightRadius |
# |
borderColor |
# |
borderRadius |
# |
borderTopLeftRadius |
# |
borderTopRightRadius |
# |
borderWidth |
# |
opacity |
# |
overflow |
# |
overlayColor |
# |
resizeMode |
# |
tintColor |
# |
这是一个适合初学者的React综合参考备忘单,帮助开发人员入门React开发。它提供了React的基础知识和常见用法,为开发人员提供快速参考和学习资料。