【超详细】React Native一个入门demo--ToDoList

这个实例是参照这篇文章写的：https://www.cnblogs.com/powertoolsteam/p/react-native-tutorials3.html

有需要的可以点进去看看，但是由于我是新手，基础很差所以看这个文章总是一脸懵逼，所以我决定自己重新写一下。

• 完整代码可以在网盘里下载：https://pan.baidu.com/s/1nCuGwguOcCnIvzcED2mIOg 提取码: punn
• 下面的内容是这个实例的每一步的分解
• 代码的import部分和样式部分可以从上面的文件里复制

一、创建一个React Native项目

打开cmd，进入到保存项目的文件夹，执行以下语句：

react-native init 项目名称

二、真机运行项目

1.电脑通过数据线连接手机，手机进入开发者选项开启USB调试，打开cmd执行以下语句

adb devices

//若出现以下内容即连接成功
//List of devices attached
//a79dc6b4        device

2.让手机和电脑连接同一个WIFI，同时在手机的WIFI里手动设置代理，代理的IP地址写电脑的IP地址，端口是8081。

打开cmd进入项目的根目录，先后执行以下语句：

react-native start

react-native run-android

三、实践

当项目能够正常运行起来时，就可以开始动手写一个简单的demo了。

     

要实现这个demo，要解决以下几个问题：

1.如何完成页面的跳转

2.如何控制组件/多选按钮的显示和隐藏

3.如何实现多选按钮两种状态的切换

整个demo的逻辑：

我们这个实例涉及四个组件，分别是App，Add，Main和ToDoListItem

其中App是一个大的父组件，我们通过这个App组件访问整个应用，而且这个组件里面有一个todoList数组对象，用于存放待办事项列表；Main组件是显示的主界面；ToDoListItem组件是获取todoList中的每一项并显示出来；Add组件是添加事项的界面。

详细内容会在代码里作解释。

---

第一步：完成ToDoListAdd页面的编写，并把该页面挂载到App.js

(1)在项目根目录下创建一个ToDoListAdd.js文件

(2)在页面中添加以下代码 (省略了样式和import部分) ：

export default class Add extends Component{

  //调用父类的构造函数，让子类继承父类的this对象，获取父类的属性
  constructor(props){ 
    super(props); 
  }

  //点击保存按钮时触发的方法，暂时不作处理  
  onPress(){  }

  render() {
    return (
        //用flexbox对页面进行布局
        <View style={styles