React-Native进阶_1.抽取样式和组件

2022-08-06 18:05:23

组织应用的样式和组件就像抽取工具类一样，放在单独的文件中，在要使用的地方去导入调用即可。

1.导出样式

Style 样式可以单独写在一个JavaScript文件中，然后导出给其他JavaScript文件使用
比如创建创建Main.js 文件，里面导出styles
import {
    StyleSheet,
} from 'react-native';
const styles = StyleSheet.create({
    item:{
        flexDirection:'row',
        borderBottomWidth:1,
        borderColor:'rgba(100,53,201,0.1)',
        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,
    },
    itemMeta:{
        fontSize:16,
        color:'rgba(0,0,0,0.6)',
        marginBottom:6,
    },
    redText:{
        color:'#db2828',
    },
    listView:{
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
    },
    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,
    },
    backImage: {
        // alignItems:'center',
        flex: 1,
        //justifyContent:'center',
        resizeMode: 'cover',
    },
    image: {

        height: 150,
        width: 100,
        justifyContent: 'center',
    },

    itemOne: {
        //  alignSelf:'flex-start',
    },
    itemTwo: {
        //alignSelf:'center',
    },
    itemThree: {
        flex: 2,
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    Container: {

        //alignItems:'flex-start',// flex-start 靠在左边显示 center 居中 flex-end 尾部
        //
        flexDirection: 'column',//row column 方向
        backgroundColor: '#eae7ff',
        flex: 1,
        //justifyContent:'center',//center ; 居中  flex-end 位于底部  space-between/space-around屏幕平均分配
    },
    Text: {
        color: '#6435c9',
        fontSize: 26,
        textAlign: 'center',
        fontStyle: 'italic',
        letterSpacing: 2,
        lineHeight: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '300',
        textDecorationLine: 'underline',
        textDecorationStyle: 'dashed',
    },

});
export {styles as default};
然后在其他JavaScript 文件中通过
import styles from './app/Styles/Main'; 导入声明的样式，然后直接使用styles

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict'
import React, {Component} from 'react';
import styles from './app/Styles/Main';
import {
    AppRegistry,
    Text,
    Image,
    View,
    ListView,
} from 'react-native';
//import {AppRegistry,} from 'react-native';
//import Day0718 from './componets/Home'

let REQUEST_URL = 'https://api.douban.com/v2/movie/top250';
export default class Day0718 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
            loaded: false,
        };
    }
  componentDidMount(){
        this._fetchData();
  }
    _fetchData(){
      fetch(REQUEST_URL)
          .then(response => response.json())
              .then(responseData =>{
                  this.setState({
                      movies:this.state.dataSource.cloneWithRows(responseData.subjects),
                      loaded: true,
                  });
              })
          .done();
    }
    render() {
        if(!this.state.loaded){
            return this._renderLoadingView();
        }
        return (
            <View style={styles.Container}>
                <ListView
                    dataSource={this.state.movies}
                    renderRow={this._renderMovieList}
                    style={styles.listView}

                />
            </View>
        );
    }
    _renderMovieList(movie){
        return(
            <View style = {styles.item}>
                <View style = {styles.itemImage}>
                    <Image
                        style ={styles.image}
                        source ={{uri:movie.images.large}}/>
                </View>
                <View style = {styles.itemContent}>
                    <Text style ={styles.itemHeader}>{movie.title}</Text>
                    <Text style ={styles.itemMeta}>{movie.original_title}({movie.year})</Text>
                    <Text style ={styles.redText}>{movie.rating.average}</Text>

                </View>
            </View>
        );
    };
    _renderLoadingView(){
        return (
            <View style ={styles.loading}>
                <Text > loading movies.....</Text>
            </View>
        );
    };

}

class ComText extends React.Component {
    render() {
        return (
            <Text style={styles.itemText}>
                {this.props.children}
            </Text>
        );
    }
}

AppRegistry.registerComponent('Day0718', () => Day0718);

2.导出组件

MovieList.js
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict'
import React, {Component} from 'react';
import styles from '../Styles/Main';
import {
    Text,
    Image,
    View,
    ListView,
} from 'react-native';

let REQUEST_URL = 'https://api.douban.com/v2/movie/top250';
export default class Day0718 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
            loaded: false,
        };
    }
    componentDidMount(){
        this._fetchData();
    }
    _fetchData(){
        fetch(REQUEST_URL)
            .then(response => response.json())
            .then(responseData =>{
                this.setState({
                    movies:this.state.dataSource.cloneWithRows(responseData.subjects),
                    loaded: true,
                });
            })
            .done();
    }
    render() {
        if(!this.state.loaded){
            return this._renderLoadingView();
        }
        return (
            <View style={styles.Container}>
                <ListView
                    dataSource={this.state.movies}
                    renderRow={this._renderMovieList}
                    style={styles.listView}

                />
            </View>
        );
    }
    _renderMovieList(movie){
        return(
            <View style = {styles.item}>
                <View style = {styles.itemImage}>
                    <Image
                        style ={styles.image}
                        source ={{uri:movie.images.large}}/>
                </View>
                <View style = {styles.itemContent}>
                    <Text style ={styles.itemHeader}>{movie.title}</Text>
                    <Text style ={styles.itemMeta}>{movie.original_title}({movie.year})</Text>
                    <Text style ={styles.redText}>{movie.rating.average}</Text>

                </View>
            </View>
        );
    };
    _renderLoadingView(){
        return (
            <View style ={styles.loading}>
                <Text > loading movies.....</Text>
            </View>
        );
    };

}

在要使用的JavaScript 文件中 导入使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict'
import React, {Component} from 'react';
import MovieList from './app/Components/MovieList';
import {
    AppRegistry,
} from 'react-native';

 class Day0718 extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return( <MovieList />);
    }
}
AppRegistry.registerComponent('Day0718', () => Day0718);

-------------------起分享，一起进步！需要你们

-----------------------欢迎各位对React-Native感兴趣的小伙伴加群

码农公寓

相关文章