[RN] 看YT學React Native – ToDoList 範例2

idobest

前言:

萬年範例: ToDO List 版本2
練習在YouTube上面看到的React Native 的各種版本的ToDO List

圖片

目前開發環境:

node.js: v14.17.6
npm: 6.14.15
react: 17.0.1
react-native: 0.64.3
expo: 44.0.4
※手機需要安裝 EXPO Go (Android / iOS)

程式碼:

心得總結:

1. 使用 AsyncStorage 來存儲資料
2. 使用 FlatList 來展示資料區塊
3. ?. 問號點的用法 (可選鏈語法) ()
4. inline style 混合的用法

註解:

//inline style 混合用法
套用兩個(或以上) styles
<Text style={[styles.base, styles.background]} >Test </Text>

套用 單行+ styles(我會比較偏向這個寫法)
<Text style={[styles.base, {color: 'red'}]} >Test </Text>

// .?點問號的用法 (有看沒有懂...XD)
// 程式碼節錄 
!mytodo?.completed && (
    <TouchableOpacity
        style={[styles.actionIcon]}
        onPress={() => markTodoCompleted(mytodo?.id)}
    >
    <Icon
        name="done"
        size={20}
        color={COLORS.white}
    />
    </TouchableOpacity>
)

範例 source code:

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

Reference: