소개

평상시는 Angular등에서 Web어플리케이션을 개발하고 있는 나입니다만, 갑자기 React Native 를 배우고 싶어졌으므로, 도연히 이 기사를 쓰기 시작했습니다.
↓ 느낌의 ToDo 목록을 만듭니다.



최종 성과물은 이쪽입니다.
todo-sample

이 기사에서 이해

React Native 기초의 기초

베스트 프랙티스적인 녀석이라든지, 이런 응용적인 사용법을 해 주었어! 그런 것은 전혀 쓰지 않습니다.

우선 설치하지 않으면 시작되지 않습니다.

React Native에는 "node"과 "watchman"이 필요하기 때문에 빨리 설치합니다.

brew install node
brew install watchman

이어 React Native 본체를 설치합니다.

npm install -g react-native-cli

프로젝트를 만들고 시작해보기

react-native init Todo
cd Todo
react-native run-ios

이 화면이 표시되면 시작 성공입니다.
그건 그렇고, 시뮬레이터에서 "Command + D → Debug JS Remotely"를 선택하면 개발자 도구로 디버깅 할 수 있으므로 기억하는 것이 좋습니다.

쉽게 설계

이 후에는 「index.ios.js」에 처리를 준준 써 가면 어떻게든 상당히 보입니다만, 모처럼이므로 손을 움직이기 전에 필요한 Class는 어떤 느낌이 될지 생각해 보겠습니다.

TodoListContainer
화면을 둘러싸는 Container. TodoList와 Footer가 있습니다.

TodoList
TodoList 전체. TodoListItem을가집니다.

TodoListItem
TodoList 단위. Checkbox와 Todo를 표시하는 Text가 있습니다.

Footer
화면 하단에 고정된 Footer. textInput과 추가 버튼이 있습니다.

최저 이러한 Class가 있으면 어떻게든 상당히 보인다.

초기 데이터 표시

먼저 'index.ios.js'를 괴롭히고 TodoListContainer를 초기화합니다.

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import TodoListContainer from 'Todo/src/TodoListContainer';

class Todo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TodoListContainer />
    );
  }
}

AppRegistry.registerComponent('Todo', () => Todo);

데이터는,Todo를 추가하는 처리를 하는 「Footer」와Todo를 묘화하는 「TodoList」의 교대적인 역할을 담당하는 「TodoListConainer」에 갖게 합니다.

TodoListContainer.js

this.state = {
  todos: [
    {text: 'Learn react native'},
    {text: 'Make a to-do app'}
  ]
}

그런 다음 "TodoList"의 props에 데이터를 전달합니다.
state와 props는 아래가 참고가 됩니다.
React의 State와 Props의 차이

render() {
  return (
    <View style={{flex: 1}}>
      <ScrollView
        style={styles.base}
      >
        <TodoList
          todos={this.state.todos} //TodoListのpropsにデータを渡す
        />
      </ScrollView>
     ・・・
}

그런 다음 ReactNative에서 제공하는 컴포넌트인 'ListView'로 Todo를 그립니다.

TodoList.js

constructor(props) {
  super(props);

  //ListViewで扱うデータ形式にする
  this.dataSource = new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2
  });
}

render() {
  return (
    <ListView
      dataSource={this.dataSource.cloneWithRows(this.props.todos)}
      renderRow={(todo) => <TodoListItem {...todo} />}
      renderSeparator={this.renderSeparator}
    />
  );
}

TodoListItem.js

render() {
  return (
    <View style={styles.todo}>
      <CheckBox
        isChecked={this.props.complete}
        onClick={()=>this.onClick()}
      />
      <Text style={[styles.text, this.state.isChecked ? styles.isTextDisabled : null]}>
        {this.props.text}
      </Text>
    </View>
  );
}

Checkbox는 다음 구성 요소를 사용했습니다.
react-native-check-box

Todo 추가

Todo의 추가는 「Footer」에 배치하고 있는 「추가」가 밀린 타이밍으로, 「TodoListContainer」의 state를 갱신해 실시합니다.

Footer.js

onAddPress() {
  // TodoListContainerのaddTodoメソッドにtextを渡して実行
  this.props.addTodo(this.state.text);

  // Todo追加後はTextInputを空にする
  this.setState({
    text: ''
  });
}

TodoListContainer.js

state에 세트한 배열에 새롭게 값을 추가할 때는, concat로 처리하는 것이 정석같기 때문에 그렇게 합니다.

addTodo(text) {
  this.setState({
    todos: this.state.todos.concat([{text: text}])
  });
}

추가되었습니다! ∩( ・ω・)∩반잖아

결론

그런 이렇게 ToDo 리스트(ToDo의 삭제를 할 수 없는 것은 신경쓰지 않는다)가 완성되었습니다.
React.js를 어느 정도 알고 있으면 생각했던 것 이상으로 고속으로 개발할 수 있네요…
하고 있어서 좋았던 React.js.