断断续续敲了一天，记录一下没有优化的分类的代码，App.js 里的代码
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {StyleSheet,View, Text, Image,ImageBackground, ListView} from 'react-native';const REQUEST_URL = 'https://api.douban.com/v2/movie/top250';type Props = {};export default class App extends Component { constructor(props){ super(props); //数据源设置 this.state = { movies : new ListView.DataSource({ rowHasChanged:(row1, row2) => row1 !== row2 }), //加载指示 loaded:false, }; this.fetchData(); } //获取数据 fetchData(){ fetch(REQUEST_URL) .then(response => response.json()) .then(responseData =>{ this.setState({ movies:this.state.movies.cloneWithRows(responseData.subjects), loaded:true }); }) .done(); } //数据展示 renderMovieList(movie){ return( {movie.title} {movie.original_title} ({movie.year}) {movie.rating.average} ); } render() { if(!this.state.loaded){ return( 加载中。。。。 ); } return ( ); }}let styles = StyleSheet.create({ loading : { flex: 1, justifyContent: 'center', alignItems: 'center' }, overlay :{ backgroundColor : 'rgba(0, 0, 0, 0.3)', alignItems : 'center' }, overlayHeader :{ fontSize:33, fontFamily:'Helvetica Neue', fontWeight:'200', color:'#eae7ff', padding:10 }, overlaySubHeader:{ fontSize:16, fontFamily:'Helvetica Neue', fontWeight:'200', color:'#eae7ff', padding:10 , paddingTop:0, }, backgroundImg : { flex:1, resizeMode : 'cover' }, imageSize : { width :100, height : 140, margin:10 }, item : { borderBottomWidth : 1, borderColor : '#6435c9', flexDirection: 'row', paddingBottom: 6, marginBottom: 6, flex: 1, }, itemContent : { flex:1, marginLeft: 13, marginTop: 6 }, itemHeader : { fontSize:18, fontFamily: 'Helvetica Neue', fontWeight: '300', color : '#6435c9', marginBottom: 6, }, itemMetal : { fontSize: 16, color : 'rgba(0, 0, 0, 0.6)', marginBottom: 6 }, redText : { fontSize: 13, color: '#db2828' }, itemOne : { // alignSelf : 'flex-start', // alignItems : 'flex' flex:2, }, itemTwo : { alignSelf: 'flex-end' }, itemThree : {}, itemText : { fontSize : 33, fontFamily : 'Helvetica Neue', fontWeight : '200', color : '#6435c9', padding : 30 }, container:{ backgroundColor:'#eae7ff', flex:1, paddingTop:23, // justifyContent : 'space-around', // alignItems : 'center' flexDirection : 'row' }}); 目录结构和效果图
将StyleSheet.create 抽取出来，在根目录简历app文件夹，创建Main.js在Styles文件下，结构如图，
Main.js 文件内容，引入方法和导出不可缺少
//引入StyleSheet 方法import {StyleSheet} from 'react-native';let styles = StyleSheet.create({ loading : { flex: 1, justifyContent: 'center', alignItems: 'center' }, overlay :{ backgroundColor : 'rgba(0, 0, 0, 0.3)', alignItems : 'center' }, overlayHeader :{ fontSize:33, fontFamily:'Helvetica Neue', fontWeight:'200', color:'#eae7ff', padding:10 }, overlaySubHeader:{ fontSize:16, fontFamily:'Helvetica Neue', fontWeight:'200', color:'#eae7ff', padding:10 , paddingTop:0, }, backgroundImg : { flex:1, resizeMode : 'cover' }, imageSize : { width :100, height : 140, margin:10 }, item : { borderBottomWidth : 1, borderColor : '#6435c9', flexDirection: 'row', paddingBottom: 6, marginBottom: 6, flex: 1, }, itemContent : { flex:1, marginLeft: 13, marginTop: 6 }, itemHeader : { fontSize:18, fontFamily: 'Helvetica Neue', fontWeight: '300', color : '#6435c9', marginBottom: 6, }, itemMetal : { fontSize: 16, color : 'rgba(0, 0, 0, 0.6)', marginBottom: 6 }, redText : { fontSize: 13, color: '#db2828' }, itemOne : { // alignSelf : 'flex-start', // alignItems : 'flex' flex:2, }, itemTwo : { alignSelf: 'flex-end' }, itemThree : {}, itemText : { fontSize : 33, fontFamily : 'Helvetica Neue', fontWeight : '200', color : '#6435c9', padding : 30 }, container:{ backgroundColor:'#eae7ff', flex:1, paddingTop:23, // justifyContent : 'space-around', // alignItems : 'center' flexDirection : 'row' }});//导出export {styles as default}; 这样App.js 代码就少很多，需要导入Main.js 头文件
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {StyleSheet,View, Text, Image,ImageBackground, ListView} from 'react-native';//导入文件import styles from './app/Styles/Main';const REQUEST_URL = 'https://api.douban.com/v2/movie/top250';type Props = {};export default class App extends Component { constructor(props){ super(props); //数据源设置 this.state = { movies : new ListView.DataSource({ rowHasChanged:(row1, row2) => row1 !== row2 }), //加载指示 loaded:false, }; this.fetchData(); } //获取数据 fetchData(){ fetch(REQUEST_URL) .then(response => response.json()) .then(responseData =>{ this.setState({ movies:this.state.movies.cloneWithRows(responseData.subjects), loaded:true }); }) .done(); } //数据展示 renderMovieList(movie){ return( {movie.title} {movie.original_title} ({movie.year}) {movie.rating.average} ); } render() { if(!this.state.loaded){ return( 加载中。。。。 ); } return ( ); }} 同样将ListView组件抽取出来，在app文件夹下建立Components文件，再建立MovieList.js文件，图片、代码如下
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {View, Text, Image,ImageBackground, ListView} from 'react-native';//导入Main.js文件 ../表示上一级目录 ./表示同一级目录import styles from '../Styles/Main';const REQUEST_URL = 'https://api.douban.com/v2/movie/top250';//修改组件名字（App-MovieList） class MovieList extends React.Component { constructor(props){ super(props); //数据源设置 this.state = { movies : new ListView.DataSource({ rowHasChanged:(row1, row2) => row1 !== row2 }), //加载指示 loaded:false, }; this.fetchData(); } //获取数据 fetchData(){ fetch(REQUEST_URL) .then(response => response.json()) .then(responseData =>{ this.setState({ movies:this.state.movies.cloneWithRows(responseData.subjects), loaded:true }); }) .done(); } //数据展示 renderMovieList(movie){ return( {movie.title} {movie.original_title} ({movie.year}) {movie.rating.average} ); } render() { if(!this.state.loaded){ return( 加载中。。。。 ); } return ( ); }}//导出export {MovieList as default}; 所需文件导入，修改组件名称，导出 都不可缺少
这样App.js文件代码就更加少了，
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow *///导入Main.js 文件import styles from './app/Styles/Main';//导入MovieList.js文件import MovieList from './app/Components/MovieList';import React, {Component} from 'react';import {StyleSheet,View, Text, Image,ImageBackground, ListView} from 'react-native';const REQUEST_URL = 'https://api.douban.com/v2/movie/top250';type Props = {};export default class App extends Component { constructor(props){ super(props); } render() { return ( //引入组件 运行一下，依然完好
