【水滴石穿】RNTest

项目地址为：https://github.com/StarkCoder/RNTest
首先我们来分析代码
跟平时不同的是，这个代码运行直接到的是HomePage页面

//index.js代码如下
/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import HomePage from './app/views/home/HomePage'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => HomePage);

//app/views/home/HomePage.js
/**
 * HomePage页面
 *
 *
 * */

import React, {PureComponent} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,

} from 'react-native';

//多选框
import CheckBox from 'react-native-check-box';
import Toolbar from '../../component/header/Toolbar';
import SwipeableItem from '../../component/swipeable/SwipeableItem';

const ListData = [
  {key: 'a'},
  {key: 'b'}
]


export default class HomePage extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      isEditMode: false,
      isChecked: false,
    }
  }

  componentDidMount(): void {

  }

  _keyExtractor = (item, index) => item.id;

  //渲染列表项
  _renderItem = (item, index) => {
    return (
      <SwipeableItem
        key={index}
        title={'系统消息'}
        note={'2019.5.4'}
        content={'AAA'}
        isEditMode={this.state.isEditMode}
      />
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Toolbar
          title='消息测试'
          hideLeftButtons={true}
          rightButtons={{
            text: '编辑',
            onPress: () => {
              const mode = this.state.isEditMode;
              this.setState({isEditMode: !mode})
            }
          }}/>
        <View style={{paddingVertical: 10}}>
          <CheckBox
            style={{flex: 1, padding: 10}}
            onClick={() => {
              this.setState({
                isChecked: !this.state.isChecked
              })
            }}
            isChecked={this.state.isChecked}
            leftText={"CheckBox"}
          />
          <CheckBox
            style={{flex: 1, padding: 10}}
            onClick={() => {
              this.setState({
                isChecked: !this.state.isChecked
              })
            }}
            isChecked={this.state.isChecked}
            leftText={"CheckBox"}
          />
        </View>
        <FlatList
          data={ListData}
          extraData={this.state.isEditMode}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e4e4e4',

  }
})

//app/component/header/Toolbar.js
import React, {PureComponent} from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
// import {withNavigation} from 'react-navigation';
import PropTypes from 'prop-types';
import styles from './Toolbar.style';
import TextButton from '../button/TextButton';

const ICON_BACK = require('../../constant/image/circle_drashed_32px.png');
const fallbackView = <View/>;

class Toolbar extends PureComponent {
  static propTypes = {
    title: PropTypes.string.isRequired,
    hideLeftButtons: PropTypes.bool,
    leftButtons: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.shape({
        text: PropTypes.string,
        onPress: PropTypes.func,
      })),
      PropTypes.shape({
        text: PropTypes.string,
        onPress: PropTypes.func,
      }),
    ]),
    rightButtons: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.shape({
        text: PropTypes.string,
        onPress: PropTypes.func,
      })),
      PropTypes.shape({
        text: PropTypes.string,
        onPress: PropTypes.func,
      }),
    ]),
    onBackPress: PropTypes.func,
  };

  static defaultProps = {
    hideLeftButtons: false,
  };

  renderButton = (button, i) => {
    if (button.icon) {
      return (
        <TouchableOpacity
          key={i}
          onPress={button.onPress}
          disabled={button.disabled}
          style={styles.iconButton}>
          <Image
            source={button.icon}
            style={styles.buttonIcon}
            resizeMode="contain"/>
        </TouchableOpacity>
      );
    } else {
      return (
        <TextButton
          key={i}
          text={button.text}
          disabled={button.disabled}
          onPress={button.onPress}/>
      )
    }
  };

  render() {
    const {title, hideLeftButtons, leftButtons, rightButtons, backgroundColor, style} = this.props;

    let leftButtonsView = fallbackView;
    if (leftButtons) {
      const finalLeftButtons = Array.isArray(leftButtons) ? leftButtons : [leftButtons];
      leftButtonsView = (
        <View style={styles.buttons}>
          {finalLeftButtons.map(this.renderButton)}
        </View>
      );
    } else if (!hideLeftButtons) {
      leftButtonsView = (
        <TouchableOpacity
          onPress={this.goBack}
          style={styles.backButton}>
          <Image
            source={ICON_BACK}
            style={styles.backIcon}
            resizeMode="contain"/>
        </TouchableOpacity>
      );
    }

    let rightButtonsView = fallbackView;
    if (rightButtons) {
      const finalRightButtons = Array.isArray(rightButtons) ? rightButtons : [rightButtons];
      rightButtonsView = (
        <View style={styles.buttons}>
          {finalRightButtons.map(this.renderButton)}
        </View>
      );
    }

    const containerStyle = StyleSheet.compose(styles.container, style);
    const finalContainerStyle = backgroundColor ? [containerStyle, {backgroundColor}] : containerStyle;
    return (
      <View style={finalContainerStyle}>
        <View style={styles.titleContainer}>
          <Text style={styles.title} numberOfLines={1}>{title}</Text>
        </View>
        <View style={styles.actionBar}>
          {leftButtonsView}
          {rightButtonsView}
        </View>
      </View>
    );
  }

  goBack = () => {
    if (typeof this.props.onBackPress === 'function') {
      this.props.onBackPress();
    } else {
      this.props.navigation.goBack(null);
    }
  };
}

// export default withNavigation(Toolbar);
export default Toolbar;

// app/component/swipeable/SwipeableItem.js
import React, {PureComponent} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  Image,

} from 'react-native';
import PropTypes from 'prop-types';
import Swipeable from 'react-native-swipeable';

const Dimensions  = require('Dimensions');
const screenWidth = Dimensions.get('window').width;

const ICON_CIRCLE_CHECK = require('../../constant/image/circle_check_32px.png');
const ICON_CIRCLE_DASH = require('../../constant/image/circle_drashed_32px.png');

const ITEM_HEIGHT = 60;

const leftContent = <Text>Pull to activate</Text>;


export default class SwipeableItem extends PureComponent {

  /**
   * isEditMode 是否是编辑模式
   *
   * isChecked 是否被选中   内部状态
   * source  头部图片资源
   * title 左边文本
   * note 右边文本
   * content 下面文本
   *
   *
   * */
  static propTypes = {
    // isChecked: PropTypes.bool.isRequired,
    isEditMode: PropTypes.bool.isRequired,
  }

  constructor(props) {
    super(props);
    this.state = {
      isChecked: false
    }
  }

  componentWillMount(): void {
  }

  //条目点击事件
  //在编辑模式下就是被选中，非编辑模式下就是跳转
  onItemPress = () => {
    if (this.props.isEditMode) {
      const isCheck = this.state.isChecked;
      this.setState({isChecked: !isCheck})
    } else {
      // this.navigation
    }
  }

  //渲染头部图片
  renderHeaderImage() {
    if (this.state.isChecked) {
      return (<Image source={ICON_CIRCLE_CHECK}/>);
    } else {
      return (<Image source={ICON_CIRCLE_DASH}/>);
    }
  }

  render() {

    const rightButtons = [
      <TouchableOpacity
        style={styles.buttonStyle1}
      ><Text>{'已读'}</Text></TouchableOpacity>,
      <TouchableOpacity
        style={styles.buttonStyle2}
      ><Text style={{color:'#FFF'}}>{'删除'}</Text></TouchableOpacity>
    ];


    return (
      <Swipeable
        leftContent={leftContent}
        rightButtons={rightButtons}
        rightButtonWidth={75}
        rightActionActivationDistance={0}
      >
        <TouchableOpacity
          style={styles.swipeContainer}
          onPress={this.onItemPress}>
          {this.props.isEditMode ? this.renderHeaderImage() : null}
          <Image
            style={styles.headImage}
            source={this.props.source}/>
          <View style={{flex: 1, paddingRight: 10}}>
            <View style={styles.rightTexts}>
              <Text>{this.props.title}</Text>
              <Text>{this.props.note}</Text>
            </View>
            <Text>{this.props.content}</Text>
          </View>
        </TouchableOpacity>
      </Swipeable>
    );
  }

}

const styles = StyleSheet.create({
  swipeContainer: {
    flex: 1,
    paddingLeft: 5,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
    height: ITEM_HEIGHT,
    backgroundColor: '#FFF'
  },
  buttonStyle1: {
    // flex:1,
     75,
    backgroundColor: '#ff7687',
    height: ITEM_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonStyle2: {
    // flex:1,
     75,
    backgroundColor: '#b9ffb4',
    height: ITEM_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headImage: {
    marginRight: 5,
  },
  rightTexts: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  }

}

后面这部分看不太懂

// app/navigation/index.js
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import AppStackNavigator from './AppStackNavigator';
import SplashScreen from '../views/SplashScreen';
import Login from '../views/login/Login';

const routeConfigMap = {
  SplashScreen,
  App: AppStackNavigator,
  Login,
};

const switchConfig = {
  headerMode: 'none',
  initialRouteName: 'SplashScreen',
};

const AppNavigator = createSwitchNavigator(routeConfigMap, switchConfig);

export default createAppContainer(AppNavigator);

//app/navigation/AppStackNavigator.js
import {createStackNavigator} from 'react-navigation';
// 首页
import HomePage from '../views/home/HomePage';


const routeConfigMap = {
  HomePage: HomePage,
};

const stackConfig = {
  headerMode: 'none',
  initialRouteName: 'HomePage',
};

const AppStackNavigator = createStackNavigator(routeConfigMap, stackConfig);

export default AppStackNavigator;

//app/navigation/NavigationService.js
import { NavigationActions } from 'react-navigation';

let _navigator;

function setNavigator(navigator) {
  _navigator = navigator;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

export default {
  navigate,
  setNavigator,
};

未完，待续。。。我还差很远～