ローディング中

ホームページ・デザイン制作のAWESOME | 加古川・姫路・明石

react-nativeでiOSアプリ開発者に！　第9回 redux(todoappその2)

みなさんこんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。
第何回なのか忘れてきました。まぁ何回でもいいでしょ。

目次 [hide]

今回のバージョンのgithubリポジトリ

https://github.com/keisukefunatsu/app-education/tree/243ce1c2df27f2dd5c778a95f81796c46535e204/TodoList

二回目ではタップしたタスクに斜線を引くように設定してみます。

参考にしたのはこちらの２つ
公式サイト
http://redux.js.org/docs/basics/ExampleTodoList.html

この方の記事のわかりやすさったら…しゅごい
http://qiita.com/xkumiyu/items/e7e1e8ed6a5d6a6e20dd

今回作るもの

今回は前回のまでの機能に少し手を加えていきます。
変更点のみ記述していきます。

それでは作っていきましょう。

と、その前に、

storeがグローバルになっているのでこのように変更しておきましょう。

containers/app/js

SyntaxHighlighterについて
1
let store = createStore(reducer)

containers/TodoApp.js

  • mapDispatchToPropsを使ってactionをまとめます
  • アクションそれぞれに関数を割り当てます
  • TodoListに対して関数を渡します。
  • submitTaskはテキスト入力後に呼び出されます
  • onTodoClickはタスクの文字列を押すと呼び出されます
SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { toggleTodo } from '../actions/index';
export default class TodoApp extends Component {
  render() {
    const { todos, submitTask, onTodoClick } = this.props;
      return (
        <TodoList todos={todos} submitTask={submitTask} onTodoClick={onTodoClick} />
    )
  }
}
 
function mapStateToProps(state) {
  return {
    todos: state.todos
  }
}
 
function mapDispatchToProps(dispatch) {
  return {
    submitTask: (text) => {
      dispatch(addTodo(text))
    },
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
 )(TodoApp)

components/TodoList.js
– テキスト入力をするとタスクが追加されます。
– Todoコンポーネントに対してcompletedを渡しています。
– 文字列を押した際にタスクを特定するためにTodoコンポーネントに対して(todo.id)の形でIDを渡しています。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
render() {
      const { todos, submitTask, onTodoClick} = this.props;
      return (
      <View style={styles.container}>               
        <View>      
           <TextInput style={styles.input} placeholder={ 'tasks?' } placeholderTextColor={"rgba(198,198,204,1)"} onChangeText={(text) => {this.setState({text})}}
          onSubmitEditing={() => {
              submitTask(this.state.text)
              console.log(todos)
              this.setState({text: ''})             
            }}
          value={(this.state && this.state.text) || ''}
        />
          {todos.map((todo) =>
            <Todo key={todo.id} text={todo.text} completed={todo.completed} {...todo} onPress={() => onTodoClick(todo.id)}
            />      
          )}
          
        </View>       
      </View>
    )
  }

components/Todo.js
– completedがtrueの場合のみ、打ち消し線が入るようになっています。三項演算子ですね。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
render(){
    const { text, completed, onPress } = this.props
    return (     
    <View>       
      <TouchableHighlight onPress={onPress} activeOpacity={75 / 100} underlayColor={"rgb(210,210,210)"}>
        <Text style={ completed ? styles.completed : ''}>{text}</Text>       
      </TouchableHighlight>
    </View>
    )
  }
   
  const styles = StyleSheet.create({
  completed: {
    textDecorationLine: 'line-through',
    textDecorationStyle: 'solid',
  }
})

ここまで出来たらこんな画面になります。

Screen Shot 2016-08-16 at 14.03.52
頑張って作ってみてくださいね。

おしまい

次回は完了したタスクを見えないようにしていきます。
次回もがんばるぞい！

More from my site

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

CONTACT US
68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.