Day 16 To Do List - 切版 1

第 16 天～

在前面说了那麽多的理论，

今天我们试着做一个简单的东西，

就是大家都很不陌生的 TO。DO。LIST

首先先开个新专案出来吧

react-native init todoList

再来在专案的根目录上，我们建一个 src 来存放我们的开发的程序码，

把 App.js 放入 src资料夹里，

调整 index.js 里 App component 的位置，

这样我们专案的初始化算是完成了

结构大概是这样

先来决定 ToDoList 要有什麽功能：

新增代办事项
完成代办事项
搜寻
全部完成
代办事项列表

那我们的最终结果大概是这样

那首先，

我们先做橘色那块，

内容有：

一个标题

因为 react-native 没有提供 h1、 h2 ...

所以我们只能用 Text component 然後自己去刻一个出来

一个输入框

使用 react-native 提供的 TextInput component

TextInput 相当於 html input，

比较常用到的 value 、 onchange、 placeholder 这些属性都会有，

当然 TextInput 还有一些额外的属性，

可以在官网上研究看看喔

三个按钮

按钮来说， react-native 是有提供我们一个 Button component，

但是， android 跟 ios 的样式不一样，

既然这样，那我们使用别的方式...自己手动刻一个

使用 TouchableOpacity component 搭配 Text component

大概是这样：

<TouchableOpacity>
  <Text>Button</Text>
</TouchableOpacity>

TouchableOpacity 是 react-native 提供侦测 touch 的反应，并且当按下时，可以有 按下去 的效果

那整个出来的结构大约是这样

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>My To Do List</Text>
        <TextInput />
        <View>
          <TouchableOpacity>
            <Text>Add</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>Search</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>Complete All</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

假如我们不加任何样式，

结果画面会是这样的，

嗯... 乱七八糟的，

这时我们就把样式给加进来，

使用 StyleSheet.create

我们先设定几个 style

root
header
title
input
button
buttonText
buttonGroup

const styles = StyleSheet.create({
  root: {},
  header: {},
  title: {},
  input: {},
  buttonGroup:{},
  button:{},
  buttonText:{}
});

分别对应到 component ，

const App = () => {
  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.header}>
        <Text style={styles.title}>My To Do List</Text>
        <TextInput style={styles.input} />
        <View style={styles.buttonGroup}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Add</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Search</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Complete All</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

先调整 header，

{
  backgroundColor: '#f44336',
  flexDirection: 'column',
  alignItems: 'center',
  paddingVertical: 10,
},

这时画面长这样，

在设定 title & input

title: {
  color: '#fff',
  fontSize: 30,
  fontWeight: 'bold',
  marginVertical: 20,
},
input: {
  backgroundColor: '#fff',
  width: '80%',
  paddingVertical: 5,
},

结果会是：

最後在把按钮样式加上去，

buttonGroup: {
  flexDirection: 'row',
  width: '80%',
  justifyContent: 'space-around',
},
button: {
  flex: 1,
  backgroundColor: '#d9d9d9',
  borderColor: '#7c7c7c',
  borderWidth: 1,
  padding: 5,
},
buttonText: {
  textAlign: 'center',
  color: '#555',
},

结果：