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

清风笑～

已于 2022-11-15 10:29:00 修改

阅读量3k

点赞数 1

分类专栏： js前端文章标签： react native 学习 react.js

于 2016-09-30 16:34:12 首次发布

本文链接：https://blog.csdn.net/ling369523246/article/details/52711497

版权

本文介绍了一位开发者使用React Native模仿‘探探’实现豆瓣电影App部分功能的过程。从环境配置到组件创建，详细讲解了如何实现首页与详情页的跳转、卡片布局、滑动效果及抽屉效果。还探讨了React组件生命周期、数据请求和状态管理，包括setState和forceUpdate的使用场景。最后，提到了事件捕获机制以及数据请求中fetch的简洁性。

摘要由CSDN通过智能技术生成

一、首先配置环境当然是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();