react native 学习之模仿”探探“实现豆瓣电影app部分功能

简介: 一、 首先配置环境 当然是node 下用npm  npm install -g react-native-cli然后创建项目react-native init react1cd re...


一、 首先配置环境 当然是node 下用npm  

npm install -g react-native-cli
然后创建项目

react-native init react1
cd react1
react-native run-android
新开一个cmd  启动项目
react-native start 

在电脑上启动的安卓虚拟机 不能摇一摇,所以还需要在 cmd 里输入  

adb shell input keyevent 82
或者
adb -s emulator-5554 shell input keyevent 82

在笔记本下启动的虚拟机会比较卡可以设置如下,会稍微好点 



二、需要实现的界面和功能如下

             


新建一个AppNavigator.js 文件 用于首页和详情页的跳转

'use strict'
import React, { Component } from 'react';
import { StyleSheet, Navigator } from 'react-native';
import ViewContainer from '../views/indexView';
import DetailContainer from '../views/Detail';

class AppNavigator extends Component {
    _renderScene(route, navigator) {
        let globalNavigatorProps = { navigator };
        switch(route.ident){
          case 'indexView':
            return(
              <ViewContainer {...globalNavigatorProps} />
            )
          case 'detail':
            return(
              <DetailContainer {...globalNavigatorProps}  />
            )
          default:
            return(
              <ViewContainer {...globalNavigatorProps} />
            )
        }
    }

    render() {
        return (
            <Navigator initialRoute={this.props.initialRoute}
              ref="AppNavigator"
              renderScene={this._renderScene}/>
        );
    }
}
module.exports = AppNavigator;
index.android.js  首先展示首页

'use strict'
import React, { Component } from 'react';
import { AppRegistry, StatusBar } from 'react-native';
import AppNavigator from './app/common/AppNavigator';

class react1 extends Component {

  render() {
    this._setStatusBar();
    return (
        <AppNavigator 
          initialRoute={{ident: 'indexView'}}/>
    );
  }
//状态栏的颜色
  _setStatusBar() {
    StatusBar.setBackgroundColor('#af3329', true);
  }
}


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


reactjs 写样式和传统的css 有一定的区别,驼峰和没有简写如(margin: 0 auto) 是没有的,同时安卓机下是不能显示出阴影的

首页中的  卡片布局如下



'use strict'
import React, { Component } from 'react';
import { StyleSheet, Text, View, AsyncStorage, Image } from 'react-native';
import util from '../common/util';

class Card extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let subject, posterImage, image; // 大图
        
        this.props.subject ? subject = this.props.subject : subject = this.props;

        posterImage = subject.images.large;

        if(posterImage != '' && posterImage != null) {
            image = <Image resizeMode="stretch" style={styles.posterImage}
                        source={{uri: posterImage}}/>;
        }else{
            image = <Text>{this.props.subject.title}</Text>;
        }
        return (
            <View style={[styles.cardBox, this.props.CardPosition ? {
                position: 'absolute',
                top: this.props.CardTop} : null
            ]}>
                <View style={styles.posterWrap}>
                    {image}
                    {this.props.new ?  <Text style={styles.newTop}>新上榜</Text> : null }
                    {this.props.rank ? <Text style={styles.topNumber}>Top {this.props.rank}</Text> : null}
                </View>
                <View style={styles.cinemaMsg}>
                    <View style={styles.cinemaMsgItem}>
                        <Text style={styles.title} numberOfLines={1} >{subject.title} 
                            { this.props.box ? <Text style={styles.cast}> {subject.casts[0].name}...</Text> : null}
                        </Text>
                        <Text style={styles.average}>评分:{subject.rating.average}</Text>
                    </View>
                    <View style={styles.cinemaMsgItem}>
                        <Text style={[styles.arrivedMsg, styles.flex2]} numberOfLines={1}>{subject.original_title} ({subject.year})</Text>
                        <Text style={styles.boxOffice} numberOfLines={1}>{ this.props.box ?  '票房:' + this.props.box/1000 :  subject.casts[0].name}</Text> 
                    </View>
                    <View style={styles.cinemaMsgItem}>
                        <Text style={styles.arrivedMsg}>类型:{subject.genres.join('\/')}</Text>
                        <Text style={styles.directors}>导演:{subject.directors[0].name}</Text>
                    </View>
                </View>
            </View>

        );
    }

}

const styles = StyleSheet.create({
    flex2: {
        overflow: 'hidden',
    },
    cardBox: {
        borderRadius: 5,
        borderWidth: 2,
        marginTop: 2,
        width: 310,
        marginHorizontal: (util.size.width - 310) / 2 ,
        borderColor: '#e1e2da',
        backgroundColor: '#ffffff',
    },
    posterWrap: {
        width: 310,
        borderColor: '#e1e2da',
    },
    posterImage: {
        height: 340,
        width: 310,
    },
    newTop: {
        position: 'absolute',
        top: 0,
        right: 0,
        fontSize: 12,
        color: '#ffffff',
        backgroundColor: 'rgba(230,69,51,0.65)',
        paddingVertical: 1,
        paddingHorizontal: 3,
    },
    topNumber: {
        position: 'absolute',
        top: 0,
        left: 0,
        fontSize: 12,
        color: '#ffffff',
        paddingVertical: 1,
        paddingHorizontal: 3,
        backgroundColor: 'rgba(255,164,51,0.7)',
    },
    cinemaMsg: {
        width: 300,
        padding: 2,
        flexDirection: 'column',
    },
    cinemaMsgItem: {
        flex: 1,
        justifyContent: 'space-between',
        flexDirection: 'row',
    },
    title: {
        flex: 2,
        fontSize: 15,
        color: '#1d1d1d',
        textAlign: 'left',
    },
    cast: {
        fontSize: 12,
    },
    average: {
        flex: 1,
        fontSize: 15,
        color: '#e64533',
        textAlign: 'right',
    },
    arrivedMsg: {
        fontSize: 13,
        textAlign: 'left',
    },
    boxOffice: {
        flex:1,
        fontSize: 12,
        color: '#e64533',
        textAlign: 'right',
    },
    directors: {
        fontSize: 12,
        textAlign: 'right',
        color: '#1d1d1d',
    },
});

module.exports = Card;


卡片滑动swipe 效果

npm install -g react-native-swipe-cards
import SwipeCards from 'react-native-swipe-cards';

render() {
        
        let data = (this.props.dataCinema ? JSON.parse(this.props.dataCinema) : null);

        return (
                <View style={styles.box}>
                    { data ? 
                        <SwipeCards cards={data} style={styles.swipeCards}
                            loop={true}
                            renderCard={(cardData) => <Card {...cardData} />}
                            handleYup={this.handleYup}  renderNope={this.renderNope} renderYup={this.renderYup}
                            handleNope={this.handleNope} 
                            cardRemoved={this.cardRemoved}/>
                        : null
                    }
                </View>
        );
    }




首页抽屉效果 
npm install -g react-native-drawer
    render() {
        return (
            <Drawer
                ref={(ref) => this._drawer = ref}
                type="static"
                content={
                  <LeftControlPanel closeDrawer={this.closeDrawer}/>
                }
                styles={{main: {shadowColor: '#000000', shadowOpacity: 0.3, shadowRadius: 15}}}
                captureGestures={true}
                acceptTap={true}
                acceptPan={true}
                negotiatePan={false}
                useInteractionManager={false}
                tweenDuration={100}
                panThreshold={0.08}
                panOpenMask={0.03}
                panCloseMask={0}
                disabled={this.state.drawerDisabled}
                openDrawerOffset={(viewport) => {
                    return 80
                }}
                panOpenMaskY={50}
                side="left"
                tweenHandler={Drawer.tweenPresets.parallax}
            >
                <Drawer
                    type="static"
                    ref={(ref) => this._drawer2 = ref}
                    content={
                        <RightControlPanel closeDrawer={this.closeDrawer2} />
                    }
                    captureGestures={true}
                    acceptTap={true}
                    acceptPan={true}
                    negotiatePan={false}
                    useInteractionManager={false}
                    tweenDuration={100}
                    panThreshold={0.08}
                    panOpenMask={0.03}
                    panCloseMask={0}
                    openDrawerOffset={(viewport) => {
                        return 80
                    }}
                    side="right"
                    tweenHandler={Drawer.tweenPresets.parallax}
                  >
                    <Main  topItem={this.state.topItem} navigator={this.props.navigator}/>
                </Drawer>
            </Drawer>


以上所用插件我都有改动 符合demo的需求····


通过这次的demo学习对react 有进一步的认识与体会,

组件的生命周期



componentWillReceiveProps(nextProps){} 接收新的数据 

 shouldComponentUpdate(nextProps, nextState){ return  boo} 必须有返回值, 返回 false componentWillUpdate()不会被调用 render()也再不执行 ,这样根据需要可以禁止页面的更新。

react native事件捕获 

onStartShouldSetPanResponderCapture, onMoveShouldSetPanResponderCapture连个方法都有返回值, 返回true 时,事件就不再传递,被当前组件劫持并调用当前组件的onResponderStart或者onResponderRlase等

数据请求利用 facth 比传统ajax 更简洁 当然属于es6 的

fetch(url).then((response) => response.text())
        .then((responseText) => {
            successCallback(JSON.parse(responseText));
        }).catch(function(err){
            failCallback(err);
        });
 state 更新 用setState 当然也可以用 如

 this.state['cards'] = JSON.parse(nextProps.dataCinema);
   this.forceUpdate();

forceUpdate就是重新render。有变量不在state上,缺又想更新state,刷新render;或者state里的某个变量层次太深,更新的时候没有自动触发render。这些时候都可以手动调用forceUpdate自动触发render。


跳转到github


 






有需要合作的,可以加个好友


相关文章
|
23天前
|
安全 定位技术 API
婚恋交友系统匹配功能 婚恋相亲软件实现定位 语音社交app红娘系统集成高德地图SDK
在婚恋交友系统中集成高德地图,可实现用户定位、导航及基于地理位置的匹配推荐等功能。具体步骤如下: 1. **注册账号**:访问高德开放平台,注册并创建应用。 2. **获取API Key**:记录API Key以备开发使用。 3. **集成SDK**:根据开发平台下载并集成高德地图SDK。 4. **配置功能**:实现定位、导航及基于位置的匹配推荐。 5. **注意事项**:保护用户隐私,确保API Key安全,定期更新地图数据,添加错误处理机制。 6. **测试优化**:完成集成后进行全面测试,并根据反馈优化功能。 通过以上步骤,提升用户体验,提供更便捷的服务。
|
3天前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
|
27天前
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
90 20
|
24天前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)
|
25天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
115 3
|
25天前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
3月前
|
移动开发 前端开发 JavaScript
React DnD:实现拖拽功能的终极方案?
本文首发于微信公众号“前端徐徐”,介绍了一个强大的 React 拖拽库——React DnD。React DnD 帮助开发者轻松创建复杂的拖拽界面,适用于 Trello 风格的应用、列表重排序、可拖拽的 UI 组件等场景。文章详细介绍了 React DnD 的基本信息、主要特点、使用场景及快速上手指南。
312 3
React DnD:实现拖拽功能的终极方案?
|
2月前
|
NoSQL 应用服务中间件 PHP
布谷一对一直播源码服务器环境配置及app功能
一对一直播源码阿里云服务器环境配置及要求
|
2月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
4月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
195 1
react项目配合diff实现文件对比差异功能

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等