前言：

大概從年初才開始自學React Native手機APP開發
之前在Udemy買了幾個相關的教學，但因為英文太差
一個課程三五十個小時，勉強看20分鐘就想睡覺了Zzz
後來在YT上看到很多React Native的教學影片…(又被google監控了 XD)
才開使用看YT自學程式的方式，順便治好我看英文影片會想睡的症頭 XDD
我在這次鐵人賽裡張貼的都是我跟著影片學習並且有完成的範例
也會有完成的source code

再次聲明：

這次鐵人賽的內容是我自學的經歷，不是XX手把手交你寫程式
所以一篇就是一個範例，不會有setp by setp 講解程式內容
大部分我都會在程式碼裡寫下註解，所以文章就不會在另外提
基本上，就算完全不懂只要照著影片keyin就能完成範例…
這些範例都是我挑選過連我這中年菜雞都能完成 XDD
以下就直接開始吧!!

程式畫面預覽：

範例影片：

part1：

part2：

程式碼：

app.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, KeyboardAvoidingView, Platform, TextInput, TouchableOpacity, Keyboard } from 'react-native';

import Task from './src/components/Task';

export default function App() {
  const [task, setTask] = useState("")
  const [taskItems, setItemsTask] = useState([])

  const handleAddTask = () => {
    // console.log(task)
    setItemsTask([...taskItems, task])
    //清空輸入框
    setTask(null);
    //關掉 手機鍵盤
    Keyboard.dismiss();
  }

  const completeTask = (index) => {
    let itemCopy = [...taskItems]
    itemCopy.splice(index, 1)

    setItemsTask(itemCopy)

  }

  return (
    <View style={styles.container}>
      <View style={styles.tasksWrapper}>
        <Text style={styles.sectionTitle}>今天的待辦事項</Text>
        <View style={styles.items} >
          {
            taskItems.map((item, index) => {
              return (
                <TouchableOpacity key={index} onPress={() => completeTask(index)}>
                  < Task title={item} />
                </TouchableOpacity>
              )

            })
          }

          {/* <Task title={"待辦事項 一"} />
          <Task title={"待辦事項 二"} />
          <Task title={"待辦事項 三"} /> */}
        </View>
      </View>

      {/* 待辦事項輸入區 */}
      <KeyboardAvoidingView
        behavior={Platform.OS === "android" ? "padding" : "height"}
        style={styles.writeTaskWrapper}
      >

        <TextInput
          placeholder='今天要做什麼?'
          style={styles.input}
          onChangeText={(text) => setTask(text)}
          value={task}
        />

        <TouchableOpacity onPress={() => handleAddTask()}>
          <View style={styles.addWrapper}>
            <Text style={styles.addText}>+</Text>
          </View>
        </TouchableOpacity>

      </KeyboardAvoidingView>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e8eaed',
    // justifyContent: "center"

  },
  tasksWrapper: {
    paddingTop: 60,
    paddingHorizontal: 20,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: "bold",
  },
  items: {
    marginTop: 30,
  },
  // 下方輸入的區塊 (全部)
  writeTaskWrapper: {
    position: "absolute",
    bottom: 60,
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  //左邊的input 區塊
  input: {
    paddingVertical: 15,
    paddingHorizontal: 20,
    backgroundColor: "#fff",
    width: 250,
    borderRadius: 60,
    borderColor: "#c0c0c0",
    borderWidth: 1,

  },
  //右邊的 +號 區塊
  addWrapper: {
    width: 60,
    height: 60,
    backgroundColor: "#fff",
    borderRadius: 30,
    justifyContent: "center",
    alignItems: "center",
    borderColor: "#c0c0c0",
    borderWidth: 1,
  },
  addText: {},

});

task.js

import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'

const Task = (props) => {
    return (
        <View style={styles.item} >
            <View style={styles.itemLeft} >
                <View style={styles.square} ></View>
                <Text style={styles.itemText} >{props.title}</Text>
            </View>
            <View style={styles.circular} >

            </View>
        </View>
    )
}

export default Task

const styles = StyleSheet.create({
    item: {
        backgroundColor: "#fff",
        padding: 15,
        borderRadius: 10,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: 20,

    },
    itemLeft: {
        flexDirection: "row",
        alignItems: "center",
        flexWrap: "wrap",
    },
    square: {
        width: 24,
        height: 24,
        backgroundColor: "#55bcf6",
        opacity: 0.4,
        borderRadius: 6,
        marginRight: 15,

    },
    itemText: {
        maxWidth: "80%",
    },
    circular: {
        width: 12,
        height: 12,
        borderColor: "#55bcf6",
        borderWidth: 2,
        borderRadius: 5,
    },

})

註解：

1. 使用 useState 存輸入的字串
2. 自製元件(components)
3. props 傳值
4. 使用map 來當作迴圈 輸出 JSX
5. 點點點的用法 (只是略懂...)

範例 Source Code:

git clone https://smilehsu@bitbucket.org/smilehsu/rn_example_todolist_1.git

補充:

這個範例已經用到兩個檔案 App.js 、Task.js
後面幾天的範例會用到檔案會更多，應該要新增一下程式的review或結構圖
這部分...有空會用draw.io繪製再補上

參考資料:

• Build your first React Native app - Todo List Tutorial Part 1
• Build your first React Native app - Todo List Tutorial Part 2
• 從ES6開始的JavaScript學習生活