Components

组件

以 Screen Container 为例，执行下面的命令，生成一个新的页面组件

ignite generate screen Login

命令会自动生成下面两个文件：

并在 App\Navigation\AppNavigation 中注册这个页面

LoginScreen 简述

Screen组件是 Contoller + View 的组合

LoginScreen.js

导入对应的组件

import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
import { connect } from 'react-redux'

对应的 Style 文件引用

// Styles
import styles from './Styles/LoginScreenStyle'

组件主体，其中 render() 方法中包含了View 的内容

class LoginScreen extends Component {
  render () {
    return (
      <ScrollView style={styles.container}>
        <KeyboardAvoidingView behavior='position'>
          <Text>LoginScreen</Text>
        </KeyboardAvoidingView>
      </ScrollView>
    )
  }
}

mapStateToProps，是一个 redux 方法，用于建立组件跟 store 的 state 的映射关系

const mapStateToProps = (state) => {
  return {
  }
}

mapDispatchToProps，也是一个 redux 方法， 用于建立组件跟 store.dispatch 的映射关系

const mapDispatchToProps = (dispatch) => {
  return {
  }
}

最后把这个class 注册为一个默认的方法，只有注册后其他程序才能使用import 方式调用。

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)