React Native 布局实现测试

最后一次在这个页面留言：（如果是作业建议看了学学就好，这真的是夕阳产业，连相关课程都是极其少的，想进阶也很难）

最近然我很无奈，我本来就不怎么懂JAVA，现在都在备考，只是作业来了我要做，但是网上的东西讲真，很多代码过一年就过时了，心态裂开。

先给效果图：

大概就是这么个样子，然后我会注意简单说说我的代码。tip，这都是我从网上学别人的，看了N+1个文章，老多比较旧的语言用不了，我他喵想哭了，只好一个个试他们的方法，我还菜，很多看不懂。先是主页APP。

这是App.js，导入页面，老规矩了。（手动狗头）

import React, { Component } from 'react';import Items from './Items';export default class App extends Component{render() {return (<Items/>);}
}

Items.js：这里是底部导航栏的页面们也是导入顶部导航栏的地方。

import TabNavigator from 'react-native-tab-navigator';
<TabNavigator>这就是到底部导航栏啦。

import React, { Component } from 'react';
import {StyleSheet,Text,View,Image
} from 'react-native';import TabNavigator from 'react-native-tab-navigator';
import Frist from './Frist';
import Recommend2 from './project/Recommend2';
import Friend from './project/Friend';
import Search from './project/Search'
import StackNavDemo1 from './project/StackNavDemo1'
//import Testitems from './project/Testitems'
//import FlatList1 from './project/FlatList1'export default class App extends Component {
constructor(props){super(props)this. state = {selectedTab: 'home',};_renderContent = (color: string, pageText: string) => {return (<View style={[styles.tabContent, {backgroundColor: color}]}><Text style={styles.tabText}>{pageText}</Text></View>);};
}render() {return (<TabNavigator><TabNavigator.Itemselected={this.state.selectedTab === 'home'}title="首页"renderIcon={() => <Image style={{width: 25, height: 25}} source={require('./project/Image/first.png')} />}renderSelectedIcon={() => <Image style={{width: 50, height: 50,}} source={require('./project/Image/flux1.png')} />}onPress={() => this.setState({ selectedTab: 'home' })}><View style={{flex: 1, justifyContent: 'flex-start',}}><Frist/></View></TabNavigator.Item><TabNavigator.Itemselected={this.state.selectedTab === 'profile'}title="发现"renderIcon={() => <Image style={{width: 25, height: 25}} source={require('./project/Image/fire.png')} />}renderSelectedIcon={() => <Image style={{width: 50, height: 50}} source={require('./project/Image/fire1.png')} />}// badgeText="100000000"onPress={() => this.setState({ selectedTab: 'profile' })}><View ><StackNavDemo1/></View> </TabNavigator.Item><TabNavigator.Itemselected={this.state.selectedTab === 'profile2'}title="搜索"renderIcon={() => <Image style={{width: 25, height: 25}} source={require('./project/Image/like.jpg')} />}renderSelectedIcon={() => <Image style={{width: 50, height: 50}} source={require('./project/Image/like1.png')} />}onPress={() => this.setState({ selectedTab: 'profile2' })}><View style={{flex: 1,justifyContent: 'flex-start',}}><View style={{ height: 0, backgroundColor: 'powderblue'}} /><Search/></View></TabNavigator.Item><TabNavigator.Itemselected={this.state.selectedTab === 'profile3'}title="专题"style={{fontSize:20}}renderIcon={() => <Image style={{width: 25, height: 25}} source={require('./project/Image/video.png')} />}renderSelectedIcon={() => <Image style={{width: 50, height: 50}} source={require('./project/Image/video1.png')} />}onPress={() => this.setState({ selectedTab: 'profile3' })}><View style={{flex: 1,justifyContent: 'flex-start',}}><Recommend2/></View></TabNavigator.Item><TabNavigator.Itemselected={this.state.selectedTab === 'profile4'}title="我的"renderIcon={() => <Image style={{width: 25, height: 25}} source={require('./project/Image/umm.png')} />}renderSelectedIcon={() => <Image style={{width: 50, height: 50}} source={require('./project/Image/unm1.jpg')} />}onPress={() => this.setState({ selectedTab: 'profile4' })}><View style={{flex: 1,justifyContent: 'flex-start',}}><View style={{ height: 0, backgroundColor: 'powderblue'}} /><Friend/></View></TabNavigator.Item></TabNavigator>);}
}var styles = StyleSheet.create({tabContent: {flex: 1,alignItems: 'center',},tabText: {color: 'white',margin: 50,},imagern: {width: 500,height:300,},textBlue: {backgroundColor:'white',color:'blue',fontSize:30,backgroundColor:'skyblue',},aaa:{fontSize:30,color:'#cccc'},
});

先说里面应用的 <Recommend2/>这个，其实就是

上面这里两个这个页面。这里是有轮播图的，

　1、通过npm安装react-native-swiper

安装插件：npm install react-native-swiper --save

import React, { Component } from 'react';
import {StyleSheet,View,Text,Image,TouchableOpacity,Dimensions,ScrollView,FlatList,
} from 'react-native';//引用插件
import Swiper from 'react-native-swiper';// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');export default class recommend extends Component {constructor(props) {super(props);this.state1 = {swiperShow: false,tips: ['最新影视', '电影最新动态', '综艺小鲜肉'],topic1: [{img: require('./Image2/1-1.jpg'),title: '速度与激情',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: '免费',},{img: require('./Image2/1-2.jpg'),title: '速度与激情2',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/1-3.jpg'),title: '速度与激情3',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/1-4.jpg'),title: '速度与激情4',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/1-5.jpg'),title: '速度与激情5',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.',quality: 'VIP',},{img: require('./Image2/1-6.jpg'),title: '速度与激情6',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/1-7.jpg'),title: '速度与激情7',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/1-8.jpg'),title: '速度与激情8',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/1-9.jpg'),title: '速度与激情9',describe: '预告片',quality: '免费',},]};this.state2 = {swiperShow: false,topic2: [{img: require('./Image2/2-1.jpg'),title: '复仇者联盟',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-2.jpg'),title: '复仇者联盟2',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-3.jpg'),title: '复仇者联盟3',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-4.jpeg'),title: '复仇者联盟4',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-5.jpg'),title: '钢铁侠',describe: ' AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-6.jpg'),title: '钢铁侠2',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-7.jpg'),title: '钢铁侠3',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-8.jpg'),title: '美国队长',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-9.jpg'),title: '美国队长2',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.',quality: 'VIP',},{img: require('./Image2/2-10.jpg'),title: '美国队长3',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.',quality: 'VIP',},{img: require('./Image2/2-11.jpg'),title: '雷神',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.',quality: 'VIP',},{img: require('./Image2/2-12.jpg'),title: '雷神2',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-13.jpg'),title: '雷神3',describe: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',quality: 'VIP',},{img: require('./Image2/2-14.jpg'),title: '新蜘蛛侠',describe: '在复仇者联盟众英雄的努力下，于灭霸无限手套事件中化作为灰烬的人们，重新回到了人世间...',quality: 'VIP',},]};this.state3 = {swiperShow: false,topic3: [{img: require('./Image2/3-1.jpg'),title: '微微一笑很倾城   ',describe: '网游高手邂逅纯美爱情',quality: '免费',},{img: require('./Image2/3-2.jpg'),title: '谈判官     ',describe: '杨幂黄子韬战商海情场',quality: '免费',},{img: require('./Image2/3-3.jpg'),title: '我的真朋友     ',describe: '杨颖邓伦因房结缘',quality: 'VIP',},{img: require('./Image2/3-4.jpg'),title: '三生三世十里桃花',describe: '三生爱恨牵引三世纠葛',quality: 'VIP',},{img: require('./Image2/3-5.jpg'),title: '终结一吻      ',describe: '一次神秘之吻带来的爱',quality: 'VIP',},{img: require('./Image2/3-6.jpg'),title: '东宫      ',describe: '公主太子上演痴心爱恋',quality: 'VIP',},{img: require('./Image2/3-7.jpg'),title: '香蜜沉沉烬如霜',describe: '杨紫邓伦上演千年之恋',quality: 'VIP',},{img: require('./Image2/3-8.jpg'),title: '南方有乔木      ',describe: '高冷宅女邂逅命中之爱',quality: 'VIP',},]};this.state4 = {swiperShow: false,topic4: [{img: require('./Image2/4-1.jpg'),title: '最强大脑          ',describe: '郭麒麟：鲁班立方你不要过来',quality: 'VIP',},{img: require('./Image2/4-2.jpg'),title: '非诚勿扰         ',describe: '理工男玩浪漫牵手美女',quality: 'VIP',},{img: require('./Image2/4-3.gif'),title: '师父            ',describe: '萌娃“面试”放大招惊呆韩宇',quality: 'VIP',},{img: require('./Image2/4-4.jpg'),title: '少年之名       ',describe: '四大导师团强势来袭',quality: 'VIP',},{img: require('./Image2/4-5.jpg'),title: '王牌对王牌第五季',describe: '沈腾花花变身苏大强表情包',quality: 'VIP',},{img: require('./Image2/4-6.jpg'),title: '故事王.爆笑段子',describe: '那些让你“红”运当头的好物',quality: 'VIP',},]};this.state5 = {swiperShow: false,topic5: [{img: require('./Image2/5-1.jpg'),title: '秘境星球              ',describe: '探索地球上最新奇的动物',quality: 'VIP',},{img: require('./Image2/5-2.jpg'),title: '航拍中国第二季  ',describe: '航拍展现中国自然美景',quality: 'VIP',},{img: require('./Image2/5-3.jpg'),title: '人生第一次    ',describe: '不同人群的人生重要节点',quality: 'VIP',},{img: require('./Image2/5-4.jpg'),title: '古墓派第二季      ',describe: '深入古墓探寻文化印记',quality: 'VIP',},{img: require('./Image2/5-5.jpg'),title: '大地情书         ',describe: '深入古墓探寻文化印记',quality: 'VIP',},]};}componentDidMount() {setTimeout(() => {this.setState({swiperShow: true,});}, 0)}// 轮播图renderBanner() {return (<Swiperstyle={styles.wrapper,{height:310}} height={280} autoplayonMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}dot={<View style={{backgroundColor:'rgba(0,0,0,.5)', width: 8, height: 6,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}activeDot={<View style={{backgroundColor: 'yellow', width: 8, height: 6, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}paginationStyle={{sbottom: 10, left: null, right: 10}}loop><Image source={require('./Image2/1.jpg')} style={styles.bannerImg} /><Image source={require('./Image2/2.jpg')} style={styles.bannerImg} /><Image source={require('./Image2/3.jpg')} style={styles.bannerImg} /><Image source={require('./Image2/4.jpg')} style={styles.bannerImg} /><Image source={require('./Image2/3.jpg')} style={styles.bannerImg} /></Swiper>)}// 小标签renderTips() {let tip = this.state1.tipsreturn (<View style={styles.tips}>{tip.map((item, index) => (<View style={styles.tipItemBox} key={index}><Image source={require('./Image2/litter.png')} style={styles.redyes} /><Text style={styles.tipItem}>{item}</Text></View>))}</View>)}// 专题精选（flatList）renderTopic1() {return (<View style={styles.topic1}><Text style={styles.topicHead,{fontSize:20}}>速度与激情系列</Text><FlatListdata={this.state1.topic1}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopic2() {return (<View style={styles.topic2}><Text style={styles.topicHead,{fontSize:20}}>漫威专题</Text><FlatListdata={this.state2.topic2}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopic3() {return (<View style={styles.topic3}><Text style={styles.topicHead,{fontSize:20}}>恋爱达人</Text><FlatListdata={this.state3.topic3}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopic4() {return (<View style={styles.topic4}><Text style={styles.topicHead,{fontSize:20}}>综艺精选</Text><FlatListdata={this.state4.topic4}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopic5() {return (<View style={styles.topic5}><Text style={styles.topicHead,{fontSize:20}}>经典纪录片</Text><FlatListdata={this.state5.topic5}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopicItem = ({ item }) => {return (<TouchableOpacity style={styles.topicItem}><View style={styles.topicContainer}><View style={styles.topicText}><Image source={item.img}  style={styles.topicImg}/><Text style={styles.topicTitle}>{item.title}<Text>                                    </Text><Text style={styles.topicPrice}>{item.quality}</Text></Text><Text style={styles.topicDesc}>{item.describe}</Text> </View></View></TouchableOpacity>)}render() {return (<ScrollView  ref={(scrollView) => { _scrollView = scrollView; }}><View style={styles.container}>{this.renderBanner()}{this.renderTips()}{this.renderTopic1()}{this.renderTopic2()}{this.renderTopic3()}{this.renderTopic4()}{this.renderTopic5()}</View></ScrollView>);}
}
const styles = StyleSheet.create({container: {flex: 1,alignItems: 'center',backgroundColor: '#efefef',},bannerImg: {height: width * 50 / 75,width: width,},wrapper: {width: width,},paginationStyle: {bottom: 6,},dotStyle: {width: 22,height: 3,backgroundColor: '#fff',opacity: 0.4,borderRadius: 0,},activeDotStyle: {width: 22,height: 3,backgroundColor: '#fff',borderRadius: 0,},tips: {backgroundColor: '#fff',flexDirection: 'row',width: width,justifyContent: 'space-around',paddingTop: 12,paddingBottom: 12,borderBottomWidth: 1,borderBottomColor: '#ccc',},tipItemBox: {flexDirection: 'row',},redyes: {width: 16,height: 16,marginRight: 5,},tipItem: {fontSize: 15,color: '#333',},topic1: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:10,},topic2: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:10,},topic3: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:10,},topic4: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:10,},topic5: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:10,},topicHead:{fontSize:16,color:'#666',padding:15,},topicItem: {width: width*0.7,marginLeft:15,},topicImg: {width: width*0.7,height: width*0.4,borderWidth:0.5,borderColor:'#cdcdcd',borderRadius:2,},topicContainer:{flexDirection: 'row',justifyContent:'space-between',marginTop:10,},topicTitle:{fontSize:16,color:'#666',},topicDesc:{fontSize:13,color:'#999',marginTop:3,},topicPrice:{fontSize:14,color:'#b4282d',},
});

然后就Items.js引入的 <Friend/>

就是这个页面。

import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,Image,ScrollView,TouchableOpacity,
} from 'react-native';export default class ScrollViewDemo extends Component {render() {return (<View style={styles.container}><View style={styles.title_view, { height:100}}><Text style={styles.title_text, { height:100,fontSize:30}}><Text>      </Text><Image source={require('./Image2/5.jpg')} style={{alignSelf:'left',width:50,height:50, paddingLeft:50}} /><Text>      </Text>肖邦不知道</Text></View><ScrollView  ref={(scrollView) => { _scrollView = scrollView; }}><View style={styles.three_image_view}><View style={styles.vertical_view}><Image source={require('./Image/VIP.png')} style={{alignSelf:'center',width:50,height:50}} /><Text style={styles.top_text}>会员中心</Text></View><View style={styles.vertical_view}><Image source={require('./Image/history.png')} style={{alignSelf:'center',width:40,height:40}}/><Text style={styles.top_text}>历史记录</Text></View><View style={styles.vertical_view}><Image source={require('./Image/yue.png')} style={{alignSelf:'center',width:45,height:45}}/><Text style={styles.top_text} >我的预约</Text></View></View><View style={styles.three_image_view}><View style={styles.vertical_view}><Image source={require('./Image/shoucang.png')} style={{alignSelf:'center',width:45,height:45}} /><Text style={styles.top_text}>我的收藏</Text></View><View style={styles.vertical_view}><Image source={require('./Image/book.png')} style={{alignSelf:'center',width:45,height:45}}/><Text style={styles.top_text}>书旗小说</Text></View><View style={styles.vertical_view}><Image source={require('./Image/more.png')} style={{alignSelf:'center',width:45,height:45}}/><Text style={styles.top_text} >更多</Text></View></View><View style={{height:30,backgroundColor:'#f9f9fb'}}/><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.png')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >车票订购</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/kuku.png')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >鱿酷公益</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/city.png')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >城市服务</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/good.png')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >平多多</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/you.png')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >购买记录</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/play.png')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >视频推荐</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/qianbao.png')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >我的钱包</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/love.png')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >酷库公益</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >视频</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >羽毛球</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >火车票</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >视频</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >羽毛球</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >火车票</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >视频</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >羽毛球</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >火车票</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><View style={styles.rectangle_view}><View style={{flexDirection:'row',alignItems: 'center'}}><Image source={require('./Image/cheak.jpg')} style={{alignSelf:'center',width:30,height:30}}/><Text style={styles.rectangle_text} >视频</Text></View><Image source={require('./Image/jiantou.jpg')} style={{alignSelf:'center',width:20,height:20}}/></View><TouchableOpacitystyle={styles.button}onPress={() => { _scrollView.scrollTo({y: 0}); }}><Text>回到顶部</Text></TouchableOpacity></ScrollView></View>);}
}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: 'white',},title_view:{backgroundColor:'#CC00FF',flexDirection:'row',height:50,justifyContent: 'center',alignItems: 'center',},title_text:{color:'white',fontSize:30,textAlign:'center'},three_image_view:{paddingTop: 15,flexDirection:'row',justifyContent: 'space-around',alignItems: 'center',backgroundColor:'white',},vertical_view:{justifyContent: 'center',alignItems: 'center',backgroundColor:'white',paddingBottom:15,},top_text:{marginTop:5,color:'black',fontSize:16,textAlign:'center'},rectangle_view:{paddingTop:12,paddingBottom:12,paddingLeft:15,paddingRight:15,flexDirection:'row',justifyContent: 'space-between',alignItems: 'center',backgroundColor:'white',  borderBottomColor:'#dedfe0',borderBottomWidth:1,},rectangle_text:{color:'black',fontSize:16,textAlign:'center',paddingLeft:8,},button: {margin: 7,padding: 5,alignItems: 'center',backgroundColor: '#eaeaea',borderRadius: 3,},});AppRegistry.registerComponent('ScrollViewDemo', () => ScrollViewDemo);function newFunction() {return 'skyblue';
}

然后就是<Frist/>这个，里面封装了顶部导航栏。

import React, { Component, lazy } from 'react';
import {createAppContainer} from 'react-navigation';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';import Recommend from './project/Recommend';
import Project2 from './project/Project2';
import Project3 from './project/Project3';
import Project4 from './project/Project4';const TabNavigator = createAppContainer(createMaterialTopTabNavigator( {Recommend: {screen: Recommend,navigationOptions: {tabBarLabel: '精选-喜欢你的喜欢',},},Project2: {screen: Project2,navigationOptions: {tabBarLabel: '两会-决战',},},Project3: {screen: Project3,navigationOptions: {tabBarLabel: '剧集-月上重火', },},Project4: {screen: Project4,navigationOptions: {tabBarLabel: '综艺',},},Project4: {screen: Project4,navigationOptions: {tabBarLabel: '学堂',},},},{tabBarOptions: {activeTintColor: '#FF1111',//当前显示顶部导航页面字体颜色inactiveTintColor: '#000000',//非显示顶部导航页面字体颜色tabStyle: {minWidth: 10,}, upperCaseLabel: false, scrollEnabled: true, style: {backgroundColor: '#678', },indicatorStyle: {height: 2,backgroundColor: 'white',},labelStyle: {fontSize: 16,marginTop: 1,marginBottom: 6,}, style: {backgroundColor: '#00CCFF',//顶部导航条背景颜色height:40,},},})
);export default TabNavigator

这里就是顶部导航栏，将他放入首页中，First页面，我一开始打这个单词就知道英语打错了，手太快，不要问，懒得改。在顶部导航栏导入页面，你会看到四个页面，除了第一个页面是有东西，其他三个，啥都没有，

import Project2 from './project/Project2';
import Project3 from './project/Project3';
import Project4 from './project/Project4';

这三个页面都是一样的，就一句话，啥都没了。

Project2，3, 4.js都是这个。

import React, { Component } from 'react';
import { Text,TouchableOpacity,StyleSheet, View,TextInput,Image } from 'react-native';export default class SecondScreen extends React.Component{render(){return(<View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text>四二爷啊  a aaaaaa</Text></View>);}
}

第一个页面还是有东西的，就是这个页面

import React, { Component } from 'react';
import {StyleSheet,View,Text,Image,TouchableOpacity,Dimensions,ScrollView,FlatList,
} from 'react-native';//引用插件
import Swiper from 'react-native-swiper';// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');export default class recommend extends Component {constructor(props) {super(props);this.state1 = {swiperShow: false,tips: ['最新影视', '电影最新动态', '综艺小鲜肉'],topic1: [{img: require('./Image2/8-1.jpg'),title: '飞狗MOCO',describe: '超治愈短腿小萌物爆笑来袭',quality: 'VIP',},{img: require('./Image2/8-2.jpg'),title: '小黄人大眼萌2',describe: ' 爆笑演绎坏蛋格鲁长成记',quality: 'VIP',},]};this.state2 = {swiperShow: false,topic2: [{img: require('./Image2/9-1.jpg'),title: '丑女洛无忧2',describe: '天生丑女攻略霸道王爷',quality: 'VIP',},{img: require('./Image2/9-2.jpg'),title: '新神医侠侣',describe: '穿回古代变神医的奇幻际遇',quality: 'VIP',},]};this.state3 = {swiperShow: false,topic3: [{img: require('./Image2/3-1.jpg'),title: '微微一笑很倾城   ',describe: '网游高手邂逅纯美爱情',quality: '免费',},{img: require('./Image2/3-2.jpg'),title: '谈判官     ',describe: '杨幂黄子韬战商海情场',quality: '免费',},]};this.state4 = {swiperShow: false,topic4: [{img: require('./Image2/4-1.jpg'),title: '最强大脑          ',describe: '郭麒麟：鲁班立方你不要过来',quality: 'VIP',},{img: require('./Image2/4-2.jpg'),title: '非诚勿扰         ',describe: '理工男玩浪漫牵手美女',quality: 'VIP',},]};this.state5 = {swiperShow: false,topic5: [{img: require('./Image2/5-1.jpg'),title: '秘境星球              ',describe: '探索地球上最新奇的动物',quality: 'VIP',},{img: require('./Image2/5-2.jpg'),title: '航拍中国第二季  ',describe: '航拍展现中国自然美景',quality: 'VIP',},]};}componentDidMount() {setTimeout(() => {this.setState({swiperShow: true,});}, 0)}// 轮播图renderBanner() {return (<Swiper style={{height:320}} height={320} autoplayonMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}dot={<View style={{backgroundColor:'rgba(0,0,0,.5)', width: 8, height: 6,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}activeDot={<View style={{backgroundColor: 'yellow', width: 8, height: 6, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}paginationStyle={{bottom: 23, left: null, right: 10}}loop><View style={styles.slide,{backgroundColor:'skyblue'}}  ><Image resizeMode='stretch' style={styles.image,{ width:width, height:285}} source={require('./Image/one.jpg')} /><Text style={ {fontSize:20}}  numberOfLines={1}  >      向往的生活第四季</Text></View><View style={styles.slide,{backgroundColor:'skyblue'}}><Image resizeMode='stretch' style={styles.image,{ width:width, height:285}} source={require('./Image/tow.jpg')} /><Text  style={{fontSize:20}}  numberOfLines={1}>      王牌对王牌第五季</Text></View><View style={styles.slide,{backgroundColor:'skyblue'}} ><Image resizeMode='stretch' style={styles.image,{ width:width, height:285}} source={require('./Image/threew.jpg')} /><Text style={{fontSize:20}}  numberOfLines={1}>      青春有你第二季</Text></View><View style={styles.slide,{backgroundColor:'skyblue'}}><Image resizeMode='stretch' style={styles.image,{ width:width, height:285}} source={require('./Image/four.jpg')} /><Text  style={{fontSize:20}}  numberOfLines={1}>      奔跑吧第八季</Text></View></Swiper>)}// 小标签renderTips() {return (<View style={{height:73}}><View style={styles.three_image_view}><View style={styles.vertical_view}><Image source={require('./Image/yingshi.png')} style={{alignSelf:'center',width:47,height:40}} /><Text style={styles.top_text}>最新影视</Text></View><View style={styles.vertical_view}><Image source={require('./Image/young.png')} style={{alignSelf:'center',width:47,height:40}}/><Text style={styles.top_text}>最强综艺</Text></View><View style={styles.vertical_view}><Image source={require('./Image/movie.png')} style={{alignSelf:'center',width:47,height:40}}/><Text style={styles.top_text} >网络电影</Text></View><View style={styles.vertical_view}><Image source={require('./Image/online.png')} style={{alignSelf:'center',width:47,height:40}}/><Text style={styles.top_text} >游戏直播</Text></View><View style={styles.vertical_view}><Image source={require('./Image/sport.png')} style={{alignSelf:'center',width:45,height:38}}/><Text style={styles.top_text} >体育</Text></View></View></View>)}// 专题精选（flatList）renderTopic1() {return (<View style={styles.topic1}><FlatListdata={this.state1.topic1}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopic2() {return (<View style={styles.topic2}><FlatListdata={this.state2.topic2}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopic3() {return (<View style={styles.topic3}><FlatListdata={this.state3.topic3}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopic4() {return (<View style={styles.topic4}><FlatListdata={this.state4.topic4}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopic5() {return (<View style={styles.topic5}><FlatListdata={this.state5.topic5}keyExtractor={(item, index) => index}renderItem={this.renderTopicItem}horizontal={true}showsHorizontalScrollIndicator={false}/></View>)}renderTopicItem = ({ item }) => {return (<TouchableOpacity style={styles.topicItem}><View style={styles.topicContainer}><View style={styles.topicText}><Image source={item.img}  style={styles.topicImg}/><Text style={styles.topicTitle}>{item.title}<Text>                                    </Text><Text style={styles.topicPrice}>{item.quality}</Text></Text><Text style={styles.topicDesc}>{item.describe}</Text> </View></View></TouchableOpacity>)}render() {return (<ScrollView  ref={(scrollView) => { _scrollView = scrollView; }}><View style={styles.container}>{this.renderBanner()}{this.renderTips()}{this.renderTopic1()}{this.renderTopic2()}{this.renderTopic3()}{this.renderTopic4()}{this.renderTopic5()}</View></ScrollView>);}
}
const styles = StyleSheet.create({container: {alignItems: 'center',backgroundColor: '#efefef',},topic1: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:5,},topic2: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:5,},topic3: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:5,},topic4: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:5,},topic5: {width: width,alignItems:'center',backgroundColor: '#fff',paddingTop:10,paddingBottom:10,marginBottom:5,},topicHead:{fontSize:16,color:'#666',padding:15,},topicItem: {paddingTop:10,width: width*0.45,marginLeft:5,},topicImg: {width: width*0.45,height: width*0.2,borderWidth:0.4,borderColor:'#cdcdcd',paddingRight:20,borderRadius:10,},topicContainer:{flexDirection: 'row',justifyContent:'space-between',marginTop:10,},topicTitle:{fontSize:16,color:'#666',},topicDesc:{fontSize:13,color:'#999',marginTop:3,},topicPrice:{fontSize:14,color:'#b4282d',},container: {flex: 1},slide: {flex: 1,justifyContent: 'center',backgroundColor: 'transparent'},text: {color: '#fff',fontSize: 30,},image: {width:width,borderRadius:10,// flex: 1},three_image_view:{paddingTop: 3,flexDirection:'row',justifyContent: 'space-around',alignItems: 'center',backgroundColor:'white',},vertical_view:{justifyContent: 'center',alignItems: 'center',// backgroundColor:'white',// paddingBottom:15,},top_text:{paddingTop:5,},
});

然后就是搜索页面了。

import React, { Component } from 'react';
import {View,TextInput,FlatList,StyleSheet,StatusBar,Text,Image,TouchableOpacity,Dimensions,
} from 'react-native';const { width, height } = Dimensions.get('window');
export default class App extends Component {_renderItem = (item) => {return (<TouchableOpacity style={styles.itemList}><View style={styles.itemContainer}><Text style={styles.itemTitle}>{item.item.title}</Text><Image source={item.item.img}  style={styles.itemImage}/><View><Text style={styles.font1}>{item.item.quality}</Text><Text style={styles.font2}>{item.item.describ}</Text></View></View></TouchableOpacity>)};_separator = () => {return <View style={{height:1, backgroundColor:'#7b7b7b'}}/>};render(){  var data = [{img: require('./Image2/7-1.jpg'),title:'小黄人大脸萌2',quality:'预告片 免费',describ:'爆笑演绎坏蛋格鲁长成记...',},{ img: require('./Image2/7-2.jpg'),title:'小妇人',quality:'VIP专享',describ:'罗南艾玛亲密无间...',},{img: require('./Image2/7-3.jpg'),title:'霹雳娇娃',quality:'VIP专享',describ:'天使集结打造银幕性感女英雄...',},{img: require('./Image2/7-4.jpg'),title:'绝地战警：疾速追击',quality:'VIP专享',describ:'超强老铁再度出击...',},{img: require('./Image2/7-5.jpg'),title:'莫比亚斯：暗夜博士',quality:'VIP专享',describ:'漫威最新暗黑英雄登场...',},{img: require('./Image2/7-6.jpg'),title:'智能大反攻',quality:'预告片 免费',describ:'奥斯卡获奖团队倾力打造...',},];return(<View style={styles.container}><StatusBaranimated={true}hidden={false}backgroundColor={'transparent'}translucent={false}barStyle={'light-content'}></StatusBar><View style={styles.searchBox}><Imagesource={require('./Image/search.png')}style={styles.searchIcon}></Image><TextInputstyle={styles.inputText}autoCapitalize='none'  //设置首字母不自动大写underlineColorAndroid={"transparent"}  //下划线颜色设置为透明placeholderTextColor={'#aaa'} placeholder={"月上重火"}/></View><View ItemSeparatorComponent={this.separator}/><View style={styles.trailList}><FlatListref = {(flatList)=>this._flatList = flatList}ItemSeparatorComponent={this.separator}renderItem={this._renderItem}data={data}></FlatList></View></View>);}
}
const styles= StyleSheet.create({container:{flexDirection:'column',flex:1,paddingTop:27,paddingBottom:5,marginBottom:5,alignItems:'center',backgroundColor:'#fff',borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:'#cdcdcd',},searchBox: {flex: 1,height: 35,marginLeft: 10,marginRight: 10,marginBottom: 5,flexDirection: 'row',backgroundColor: '#E6E7E8',borderRadius:5,},searchIcon: {alignSelf:'center',marginLeft:7,marginRight:7,width:18,height:18,},inputText: {alignSelf:'center',marginTop:0,flex:1,height:45,marginLeft: 5,marginRight: 5,fontSize: 18,lineHeight: 30,textAlignVertical: 'center',textDecorationLine: 'none'},trailList: {flex:20,width:400,height:100,marginLeft: 5,marginRight: 5,},font1:{color:'#FF0000',paddingBottom:5,},font2:{fontSize:16,paddingBottom:5,},txt: {textAlign:'center',textAlignVertical: 'center',color: '#0d0d0d',fontSize: 30,flex:1,height:180,backgroundColor:'#fff',},itemList: {flexDirection:'row',marginLeft:5,paddingBottom:5,paddingTop:5,},itemContainer: {flex:1,marginLeft:5,justifyContent:'center',},itemImage: {width: width*0.8,height: width*0.5,borderWidth:0.5,borderColor:'#cdcdcd',borderRadius:2,},itemTitle: {fontSize:20,color:'#42a5cb',fontWeight:'900',paddingBottom:5,paddingTop:8,},
});

这里是发现的版面：

当然我在发现这里就测试了一下列表FlatList，我想买华为，可我没钱，对，很穷啊，小米8用2000买了128G至今没换。还有，图标是我自己P得啦，网上找然后弄成圆的，ps搞很容易的。

import React, { Component } from 'react';
import {FlatList,StyleSheet, View,Text,TouchableOpacity,TouchableHighlight,Image,
} from 'react-native';export default class FlatList1 extends Component{constructor(props){super(props)this.state = {data:[{  key:'王者荣耀', img: require('./Image/aaa.png'), val:'2.56GB'},{  key:'bilibili', img: require('./Image/bbb.png'), val:'64.88MB'},{  key:'钉钉', img: require('./Image/ccc.png'), val:'164.0MB'},{  key:'斗地主', img: require('./Image/ddd.png'), val:'94MB'},{  key:'微信', img: require('./Image/eee.png'), val:'265MB'},{  key:'QQ', img: require('./Image/fff.png'), val:'158MB'},{  key:'和平精英', img: require('./Image/ggg.png'), val:'1.98GB'},{  key:'抖音', img: require('./Image/hhh.png'), val:'89MB'},{  key:'高等数学', img: require('./Image/hhh.png'), val:'68.5MB'},{  key:'a  ', img: require('./Image/hhh.png'), val:'  a '},]}
}render() {return (<View ><View style={{ padding:10, height:60, backgroundColor: 'skyblue'}}><TouchableHighlight style={styles.button} onPress={this.onPress}><Text style={{fontSize:30}}>华为市场，让生活更美好</Text></TouchableHighlight></View><FlatListdata={this.state.data}renderItem={({item}) =>(<View style={styles.items}><Image source={item.img}  style={{width:50,height:50}}/><View style={{ flex:1,paddingLeft:10}}><Text style={{fontSize: 30}}> {item.key} </Text><Text style={{fontSize: 30}}> {item.val} </Text></View><TouchableOpacity style={styles.button3} onPress={this.onPress}> <Text> 一键安装 </Text></TouchableOpacity></View>)}/></View>);}
}const styles = StyleSheet.create({items:{flexDirection:'row',alignItems:'center',padding:10,borderBottomColor:'#CCC',},});

emmmmm，以上就是我的全部代码。没啥了，一个大概的预览视频：https://v.youku.com/v_show/id_XNDY4NjE3MzY2NA==.html

我放优酷了。

记住啊，组件要先安装的。

1.安装react-navigation： npm install --save react-navigation

2.页面间跳转 createStackNavigator 执行命令安装react-navigation-stack：
npm install react-navigation-stack @react-native-community/masked-view

3.直接安装：npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

4.TabBar组件：npm install react-native-tab-navigator --save

5. npm i react-native-swiper --save

npm i react-native -g

6. 底部导航栏安装react-navigation-tabs： npm install react-navigation-tabs

代码都是仿别人的，感谢很多网站的很多博客主。

React Native 布局实现测试相关推荐

React Native布局详细指南
本文出自<React Native学习笔记>系列文章. 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Nati ...
从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
React Native布局
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提 ...
React Native初探
React Native初探转自:博客园叶小钗前言很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP ...
React Native 学习资源精选仓库
<React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...
React Native 学习资源精选仓库(汇聚知识，分享精华)
React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...
React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
构建了我的第一个React Native应用程序之后，我现在确信这是未来。
by Taylor Milliman 泰勒·米利曼(Taylor Milliman) 构建了我的第一个React Native应用程序之后,我现在确信这是未来. (After building my ...
React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
iOS新知识学习之React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

React Native 布局实现测试

React Native 布局实现测试相关推荐

最新文章

热门文章