项目地址为：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 (<SwipeableItemkey={index}title={'系统消息'}note={'2019.5.4'}content={'AAA'}isEditMode={this.state.isEditMode}/>);}render() {return (<View style={styles.container}><Toolbartitle='消息测试'hideLeftButtons={true}rightButtons={{text: '编辑',onPress: () => {const mode = this.state.isEditMode;this.setState({isEditMode: !mode})}}}/><View style={{paddingVertical: 10}}><CheckBoxstyle={{flex: 1, padding: 10}}onClick={() => {this.setState({isChecked: !this.state.isChecked})}}isChecked={this.state.isChecked}leftText={"CheckBox"}/><CheckBoxstyle={{flex: 1, padding: 10}}onClick={() => {this.setState({isChecked: !this.state.isChecked})}}isChecked={this.state.isChecked}leftText={"CheckBox"}/></View><FlatListdata={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 (<TouchableOpacitykey={i}onPress={button.onPress}disabled={button.disabled}style={styles.iconButton}><Imagesource={button.icon}style={styles.buttonIcon}resizeMode="contain"/></TouchableOpacity>);} else {return (<TextButtonkey={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 = (<TouchableOpacityonPress={this.goBack}style={styles.backButton}><Imagesource={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 = [<TouchableOpacitystyle={styles.buttonStyle1}><Text>{'已读'}</Text></TouchableOpacity>,<TouchableOpacitystyle={styles.buttonStyle2}><Text style={{color:'#FFF'}}>{'删除'}</Text></TouchableOpacity>];return (<SwipeableleftContent={leftContent}rightButtons={rightButtons}rightButtonWidth={75}rightActionActivationDistance={0}><TouchableOpacitystyle={styles.swipeContainer}onPress={this.onItemPress}>{this.props.isEditMode ? this.renderHeaderImage() : null}<Imagestyle={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,width: 75,backgroundColor: '#ff7687',height: ITEM_HEIGHT,justifyContent: 'center',alignItems: 'center',},buttonStyle2: {// flex:1,width: 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,
};

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