关于React Native的简介：
反应本机通过仅使用JavaScript来帮助我们创建真实而令人兴奋的移动应用程序，而android和iOS平台均支持。 反应本机应用程序有助于节省开发时间，并且还得到了Facebook的支持。
react本机框架可帮助我们构建UI组件的层次结构，进而帮助我们构建JavaScript代码。 Facebook使用相同的设计原则（包括设计界面）来开发react native和react js。
由于Facebook使用相同的代码来创建React iOS和Android应用程序以及Web应用程序，因此您只需要了解HTML，CSS和JavaScript。
为什么要使用React Native？
1) 跨平台
Native的最大优势可能是它通过使用几乎相同的代码并进行了一些简单的更改来帮助您为Android和iOS生态系统开发应用程序。
2) 的JavaScript
反应本机仅使用JavaScript，因此无需了解多种编程语言。
3) 性能
由于使用了类似的代码，因此可以快速开发适用于iOS和Android的移动应用程序。它还促进了热重载功能，该功能确保开发人员也可以立即看到所做的微小更改。
4) 大型开发者社区
由于一个大型社区可以帮助及时解决所有查询，因此可以为框架提供足够的支持。
5) 被许多公司使用
尽管该框架是新的，但仍被广泛使用。许多公司已经将框架迁移到软件上，而其他公司则希望使用该框架来促进开发和维护。
6) 绝佳的职业机会
由于具有交叉兼容性，它已变得非常流行。高兼容性还导致对本机反应的需求增加。
查看，陈述，道具和样式
视图-
该视图是用于构建用户界面的react native的基本组件。它是通过flexbox，样式，触摸处理和辅助功能控件支持布局的容器。它直接映射到本地视图，类似于运行React Native应用程序的任何平台。
州-
在React Native中，有两种类型的数据可控制组件。这些是道具和状态。对于将来将要更改的数据，我们使用状态。它确定组件的行为及其呈现方式。
道具-
这是属性的缩写。它有助于我们在创建时使用不同的参数自定义组件。道具从一个容器传递到另一个容器，作为在它们之间传递数据的一种方式。
风格-
本机使用JavaScript对应用程序进行样式设置。所有核心组件都使用一个名为style的属性，这些名称和值类似于适用于网络的CSS。要为组件设置样式，我们可以使用内联样式或使用StyleSheet（这是React本机组件）。
使用本机反应有哪些缺点？
1) 随着时间的推移而改善
REACT本机框架到目前为止还不是完美无缺，并且存在一些未解决的故障。该框架中缺少一些自定义模块，这可能会导致您浪费时间来构建和创建自己的模块。
2) 它仍然具有技术优势
即使该软件非常简单，您仍然需要专业的开发人员来注意一些技术故障和错误。
3) 它的存在不确定
由于facebook有权随时终止该项目，因此其存在是不确定的。但是要注意的是，由于该软件的广泛普及，这种情况极不可能发生。
创建一个React Native 应用程式-To-Do应用程序。
现在，我们将制作一个名为To-do的移动应用程序。该应用程序使我们可以在应用程序上添加和管理任务。
设置开发环境
Expo是围绕React本机和本机平台构建的一组工具和服务，可帮助您在同一JavaScript代码库的iOS，Android和Web应用程序上进行开发，构建，部署和快速迭代。
我们将使用Expo Framework开发我们的React Native应用程序。
– 第一步是在计算机上安装nodeJS。
– 安装完成后，我们需要获取Expo的命令行工具。为此，您需要输入以下命令：
npm安装Expo-cli –global
– 安装Expo-xli工具后，我们需要创建我们的项目。为此，在终端中键入以下命令：
expo init待办事项
– 接下来，为所有空白应用程序选择一个屏幕，同时包括Expo工作流功能。
– 输入应用程序名称，然后按Enter键继续设置。
– 要启动该应用程序，您可以导航到新创建的项目文件夹，然后键入“ npm开始”。要停止该过程，请按Ctrl + C
cd todo-app
npm开始
开发服务器将开始运行，并且将在Web浏览器中使用Expo Manager屏幕打开一个新选项卡。
现在有两种方法可以预览应用程序：
– 该应用程序可以在Android模拟器上运行，您可以通过在PC上安装Android Studio来获得。
– 您也可以在手机上安装Expo应用程序，然后扫描QR码以在手机上运行该应用程序。待办事项应用程序将在您更改代码时加载并更新。
最后一步是安装您选择的文本编辑器。
创建应用程序的组件
我们在此处创建的所有内容都是一个组件。下面提到的所有这些都是单独的组件，已经组合在一起以创建完整的移动应用程序。
– 应用程式
– 标头
– 显示影像
– 待办事项
– 待办事项输入
现在让我们开始：
– 在文本编辑器中打开项目文件夹，在src文件夹中，创建一个components文件夹，我们将在其中添加所有组件。
– 在组件下创建一个名为Header.js的文件，然后输入以下代码：
- 从“反应”导入React；
- 从“ react-native”导入{StyleSheet，View，Text}；
- const 标头 =道具=> {
- 返回（
- <查看样式= {styles.header}>
- <文字样式= {styles.headerTitle}>{props.title}</Text>
- </View>
- ）;
- };
- const styles = StyleSheet.create（{
- 标头：{
- 宽度：“ 100％”，
- 高度：100，
- paddingTop：40，
- backgroundColor：“紫色”，
- alignItems：“居中”，
- justifyContent：“中心”
- }，
- headerTitle：{
- 白颜色”，
- 字体大小：20
- }
- }）;
- 导出默认标题；
– 创建一个名为DisplayImage.js的文件，并添加以下代码：
– 从“反应”导入React；
– 从“ react-native”导入{Image，StyleSheet}；
–
– const DisplayImage =道具=> {
– 如果（props.taskStatus.length< 1) {
– return (
– <图片样式= {styles.image}源= {require（“ ../ assets / tick.png”）} />
– );
– } 其他{
– return null;
– }
– };
–
– const styles = StyleSheet.create（{
– image: {
– width: 250,
– height: 250,
– margin: 80,
– marginTop: 250
– }
– }）;
–
– 导出默认的DisplayImage;
– 接下来，创建一个名为TodoItem.js的文件并添加以下代码：
从“ react”导入React，{useState}；
导入{
View,
Text,
StyleSheet,
TouchableOpacity,
CheckBox
}来自“ react-native”；
const 待办事项 =道具=> {
const [check，setCheck] = useState（false）;
return (
<查看样式= {styles.screen}>
<查看样式= {styles.listItem}>
<Text>{props.title}</Text>
</View>
<CheckBox value = {check} onValueChange = {（）=> setCheck(!check)} />
<TouchableOpacity
onPress = {props.onDelete.bind（this，props.id）}
style = {styles.button}
>
<文字样式= {styles.text}>Delete</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create（{
listItem: {
padding: 10,
backgroundColor：“＃eee”，
borderColor：“黑色”，
borderWidth: 1,
width: “60%”
},
screen: {
flexDirection：“行”，
marginTop: 30,
justifyContent：“之间的空间”，
width: “100%”
},
button: {
display: “flex”,
height: 40,
borderRadius: 5,
padding: 10,
backgroundColor：“红色”，
alignItems：“居中”，
justifyContent：“中心”
},
buttonGreen: {
display: “flex”,
height: 40,
borderRadius: 5,
padding: 10,
backgroundColor：“绿色”，
alignItems：“居中”，
justifyContent：“中心”
},
text: {
fontSize: 14,
color: “white”
}
}）;
导出默认的TodoItem;
– 创建一个名为TodoInput.js的文件夹，并添加以下代码：
从“ react”导入React，{useState}；
导入{
View,
TextInput,
Button,
StyleSheet,
Modal,
Alert,
Image
}来自“ react-native”；
从“ ./Header”导入Header；
const TodoInput =道具=> {
const [enteredTask，setEnteredTask] = useState（“”）;
const TodoInputHandler = EnteredText => {
setEnteredTask（enteredText）;
};
const addTaskHandler =（）=> {
props.onAddTask（enteredTask）;
setEnteredTask(“”);
};
const checkInput = EnteredTask => {
如果（enteredTask.length>0）addTaskHandler（）;
else {
Alert.alert（“错误”，“请输入任务”，[{文本：“确定”}]，{
cancelable: false
});
}
};
return (
<模态visible = {props.visible} animationType =“ slide”>
<标头标题=“待办事项”></Header>
<查看样式= {styles.inputContainer}>
<TextInput
placeholder=”Task”
style={styles.input}
onChangeText = {TodoInputHandler}
value={enteredTask}
/>
<查看样式= {styles.buttonContainer}>
<查看样式= {styles.button}>
<Button
title=”CANCEL”
color=”red”
onPress = {props.onCancel}
></Button>
</View>
<查看样式= {styles.button}>
<Button
title=”ADD”
color=”green”
onPress={() =>checkInput（enteredTask）}
/>
</View>
</View>
</View>
</Modal>
);
};
const styles = StyleSheet.create（{
inputContainer: {
flex: 1,
justifyContent：“中心”，
alignItems: “center”
},
input: {
width: “80%”,
borderColor：“黑色”，
borderWidth: 1,
padding: 10,
marginBottom: 10
},
buttonContainer: {
flexDirection：“行”，
justifyContent：“周围空间”，
width: “60%”
},
button: {
width: “40%”
}
}）;
导出默认的TodoInput;
– 用以下代码替换App.js文件中的默认代码：
从“ react”导入React，{useState}；
从“ react-native”导入{StyleSheet，View，Button，FlatList，Image}；
从“ ./components/TodoItem”导入TodoItem；
从“ ./components/TodoInput”导入TodoInput；
从“ ./components/DisplayImage”导入DisplayImage；
从“ ./components/Header”导入Header；
导出默认函数App（）{
const [tasks，setTasks] = useState（[]）;
const [addTasks，setAddTasks] = useState（false）;
const addTaskHandler = taskTitle => {
setTasks（currentTasks => [
…currentTasks,
{id：Math.random（）。toString（），值：taskTitle}
]);
setAddTasks(false);
};
const deleteTaskHandler = taskId => {
setTasks（currentTasks => {
返回currentTasks.filter（task =>task.id！== taskId）;
});
};
const canceltaskAdditionHandler =（）=> {
setAddTasks(false);
};
return (
<View>
<标头标题=“待办事项”></Header>
<查看样式= {styles.screen}>
<按钮标题=“添加新任务” onPress = {（）=> setAddTasks(true)}></Button>
<TodoInput
visible={addTasks}
onAddTask = {addTaskHandler}
onCancel = {canceltaskAdditionHandler}
/>
</View>
<DisplayImage taskStatus = {tasks} />
<查看样式= {styles.screenlist} >
<FlatList
keyExtractor = {（item，index）=> item.id}
data={tasks}
renderItem = {itemData => (
<TodoItem
title = {itemData.item.value}
onDelete = {deleteTaskHandler}
id = {itemData.item.id}
/>
)}
></FlatList>
</View>
</View>
);
}
const styles = StyleSheet.create（{
screen: {
paddingTop: 70,
填充水平：70
},
screenlist: {
marginLeft: 20,
marginRight: 20
}
}）;
这就是我们制作待办事项移动应用程序的方式，它应该如下所示运行。