React Native 布局实现测试

最新推荐文章于 2024-05-16 01:23:01 发布

程序服务个体户

最新推荐文章于 2024-05-16 01:23:01 发布

阅读量1.2k

点赞数

分类专栏： React Native测试项目笔记文章标签：列表显示底部导航栏顶部导航栏轮播图搜索框

本文链接：https://blog.csdn.net/mas1461261388/article/details/106340867

版权

笔记同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

React Native测试项目

2 篇文章 0 订阅

订阅专栏

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

最近然我很无奈，我本来就不怎么懂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.Item
          selected={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.Item
          selected={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.Item
          selected={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.Item
          selected={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.Item
          selected={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 (
                <Swiper
                style={styles.wrapper,{height:310}} height={280} autoplay
                onMomentumScrollEnd={(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.tips
        return (
            <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>
                <FlatList
                    data={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>
                <FlatList
                    data={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>
                <FlatList
                    data={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>
                <FlatList
                    data={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>
                <FlatList
                    data={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>
         <TouchableOpacity
          style={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} autoplay
                onMomentumScrollEnd={(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}>
                <FlatList
                    data={this.state1.topic1}
                    keyExtractor={(item, index) => index}
                    renderItem={this.renderTopicItem}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                />
            </View>
        )
    }

    renderTopic2() {
        return (
            <View style={styles.topic2}>
                <FlatList
                    data={this.state2.topic2}
                    keyExtractor={(item, index) => index}
                    renderItem={this.renderTopicItem}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                />
            </View>
        )
    }

    renderTopic3() {
        return (
            <View style={styles.topic3}>
                <FlatList
                    data={this.state3.topic3}
                    keyExtractor={(item, index) => index}
                    renderItem={this.renderTopicItem}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                />
            </View>
        )
    }

    renderTopic4() {
        return (
            <View style={styles.topic4}>
                <FlatList
                    data={this.state4.topic4}
                    keyExtractor={(item, index) => index}
                    renderItem={this.renderTopicItem}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                />
            </View>
        )
    }

    renderTopic5() {
        return (
            <View style={styles.topic5}>
                <FlatList
                    data={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}>
				<StatusBar
					animated={true}
					hidden={false}
					backgroundColor={'transparent'}
					translucent={false}
					barStyle={'light-content'}
				>
				</StatusBar>
 
				<View style={styles.searchBox}>
					<Image
						source={require('./Image/search.png')}
						style={styles.searchIcon}>
					</Image>
					<TextInput
						style={styles.inputText}
						autoCapitalize='none'  //设置首字母不自动大写
						underlineColorAndroid={"transparent"}  //下划线颜色设置为透明
						placeholderTextColor={'#aaa'} 
						placeholder={"月上重火"}
					/>
				</View>
				<View ItemSeparatorComponent={this.separator}/>
				<View style={styles.trailList}>
					<FlatList
						ref = {(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>
      
      <FlatList
      data={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

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

程序服务个体户

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
React Native 布局实现测试

最近然我很无奈，我本来就不怎么懂JAVA，现在都在备考，只是作业来了，我要做，但是网上的东西说真的，过一年很多代码就过时了，心态裂开。我只是完成个作业截图放这个软件里头而且点击也没有播放功能的，这不用来搞任何商业事的。先给效果图：大概就是这么个样子，然后我会注意简单说说我的代码。tip，这都是我从网上学别人的，看了N+1个文章，老多比较旧的语言用不了，我他喵想哭了，只好一个个试他们的方法，我还菜，很多看不懂。先是主页APP。这是Ap...
复制链接

扫一扫

专栏目录