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 項目簡單整理-組件優化

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

安裝chromadb注意事項

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

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以太網驅動總結