网站制作方案模板/新闻稿件

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

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}><ListViewdataSource={this.state.movies}renderRow={this._renderMovieList}style={styles.listView}/></View>);}_renderMovieList(movie){return(<View style = {styles.item}><View style = {styles.itemImage}><Imagestyle ={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}><ListViewdataSource={this.state.movies}renderRow={this._renderMovieList}style={styles.listView}/></View>);}_renderMovieList(movie){return(<View style = {styles.item}><View style = {styles.itemImage}><Imagestyle ={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交流群：230274309

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

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