React Native 项目简单整理-组件优化

断断续续敲了一天，记录一下没有优化的分类的代码，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<Props> {
    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(
          <View style = {styles.item}>
              <View style = {styles.itemImage}>
                  <ImageBackground
                      source = {{uri:movie.images.large}}
                      style = {styles.imageSize}>
                  </ImageBackground>
              </View>
              <View style = {styles.itemContent}>
                  <Text style = {styles.itemHeader}>{movie.title}</Text>
                  <Text style = {styles.itemMetal}>{movie.original_title} ({movie.year})</Text>
                  <Text style = {styles.redText}>{movie.rating.average}</Text>

              </View>

          </View>

      );
    }

  render() {

        if(!this.state.loaded){
            return(
              <View style = {styles.container}>
                  <View style = {styles.loading}>
                      <Text>加载中。。。。</Text>
                  </View>
              </View>
            );
        }
    return (

      <View style = {styles.container}>
       <ListView
           dataSource = {this.state.movies}

           renderRow = {this.renderMovieList}

       />
        </View>


    );
  }
}

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<Props> {
    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(
          <View style = {styles.item}>
              <View style = {styles.itemImage}>
                  <ImageBackground
                      source = {{uri:movie.images.large}}
                      style = {styles.imageSize}>
                  </ImageBackground>
              </View>
              <View style = {styles.itemContent}>
                  <Text style = {styles.itemHeader}>{movie.title}</Text>
                  <Text style = {styles.itemMetal}>{movie.original_title} ({movie.year})</Text>
                  <Text style = {styles.redText}>{movie.rating.average}</Text>

              </View>

          </View>

      );
    }

  render() {

        if(!this.state.loaded){
            return(
              <View style = {styles.container}>
                  <View style = {styles.loading}>
                      <Text>加载中。。。。</Text>
                  </View>
              </View>
            );
        }
    return (

      <View style = {styles.container}>
       <ListView
           dataSource = {this.state.movies}

           renderRow = {this.renderMovieList}

       />
        </View>


    );
  }
}

同样将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(
            <View style = {styles.item}>
                <View style = {styles.itemImage}>
                    <ImageBackground
                        source = {{uri:movie.images.large}}
                        style = {styles.imageSize}>
                    </ImageBackground>
                </View>
                <View style = {styles.itemContent}>
                    <Text style = {styles.itemHeader}>{movie.title}</Text>
                    <Text style = {styles.itemMetal}>{movie.original_title} ({movie.year})</Text>
                    <Text style = {styles.redText}>{movie.rating.average}</Text>

                </View>

            </View>

        );
    }

    render() {

        if(!this.state.loaded){
            return(
                <View style = {styles.container}>
                    <View style = {styles.loading}>
                        <Text>加载中。。。。</Text>
                    </View>
                </View>
            );
        }
        return (

            <View style = {styles.container}>
                <ListView
                    dataSource = {this.state.movies}

                    renderRow = {this.renderMovieList}

                />
            </View>


        );
    }
}

//导出
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<Props> {
    constructor(props){
        super(props);

    }

  render() {

    return (
        //引入组件
     <MovieList/>

    );
  }
}

运行一下，依然完好

React Native 项目简单整理-组件优化

一键自动化博客发布工具,用过的人都说好(掘金篇)

「Pygors跨平台GUI」2：安装MinGW-w64、MSYS2还是WSL2

[转帖]

python列出centos7内存使用前50的进程信息

「Pygors跨平台GUI」1：Pygors跨平台GUI应用研究

nodejs学习06——小案例

评估统计算法在银行伪造钞票检测中的价值

C# Xmlserializer 程序集内存泄露

Java ThreadPoolShutdown

5月21日相聚上海张江！与文心大模型一起共建大模型产业应用生态圈

iOS--使用MWPhotoBrowser進行圖片保存滑動卡頓問題

iOS--融雲即時通信的使用（推送、聊天和會話列表的頭像和暱稱）

iOS -- 類似口碑提問動態效果

ReactNative--控件小記-更新中

iOS--音樂播放器之DOUAudioStreamer

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結