react-native(豌豆电影项目开发)

最新推荐文章于 2024-08-20 09:07:09 发布

庚中

最新推荐文章于 2024-08-20 09:07:09 发布

阅读量1.3k

点赞数 3

分类专栏：十九.React-Native 文章标签： react-native(豆瓣电影开发)

本文链接：https://blog.csdn.net/xiaodi520520/article/details/101545907

版权

本文介绍了使用React-Native开发豆瓣电影APP的过程，包括前期准备、创建底部tabbar、美化tabbar、添加顶部导航、制作轮播图、实现页面间的跳转、获取并显示电影数据、以及动态标题的设置。详细讲述了每个步骤的关键代码和遇到的问题及解决方案。

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

一.前期准备

1.导航使用的是react-navigation导航,安装方式如下:

yarn add react-navigation
npm install react-navigation --save

react-navigation官网

2.创建目录
对应底部三个tabbar
在这里插入图片描述

二.开始编写tabbar

1.依次如下方式编写三个底部tabbar

import React,{
   Component} from 'react';
import {
   View,Text} from 'react-native';
export default class Home extends Component{
   
    render(){
   
        return (
            <View>
                <Text>Home</Text>
            </View>
        )
    }
}

2.在App.js中用createBottomTabNavigation引入
createBottomTabNavigation介绍:
https://reactnavigation.org/docs/zh-Hans/tab-based-navigation.html
在App.js中导入并引用
在这里插入图片描述
遇到的坑
1.报错:

react-native-gesture-handler ,react-navigation-tabs,react-native-reanimated
解决办法:各自安装即可

npm i 包名 -S

2.还有提示要有createAppContainer
解决办法引入createAppContainer

修改后的App.js代码变为:

import React from 'react';
import {
   createAppContainer} from 'react-navigation';
import {
   createBottomTabNavigator} from 'react-navigation-tabs';
import HomeScreen from './src/components/home/home.js';
import MineScreen from './src/components/mine/mine.js';
import MovieScreen from './src/components/movie/movie.js';

const TabBar = createBottomTabNavigator({
   
  Home: HomeScreen,
  Mine: MineScreen,
  Movie: MovieScreen,
});

export default createAppContainer(TabBar);

最后,终于见证奇迹啦
在这里插入图片描述

三.美化tabbar

增加图标和修改样式

import React from 'react';
import {
   createAppContainer} from 'react-navigation';
import {
   createBottomTabNavigator} from 'react-navigation-tabs';
import HomeScreen from './src/components/home/home.js';
import MineScreen from './src/components/mine/mine.js';
import MovieScreen from './src/components/movie/movie.js';
import {
   Image} from 'react-native';

const TabBar = createBottomTabNavigator(
  // 里面是两个对象
  {
   
    Home: {
   
      screen: HomeScreen,
      navigationOptions: {
   
        tabBarLabel: '首页',
        tabBarIcon: ({
   focused, tintColor}) => {
   
          //跟一个方法,参数是一个对象
          return (
            <Image
              source={
   
                focused
                  ? require('./src/statics/images/tarBar/home_selected.png')
                  : require('./src/statics/images/tarBar/home_normal.png')
              }
              style={
   {
   tintColor: tintColor, width: 25, height: 25}}
            />
          );
        },
      },
    },
    Movie: {
   
      screen: MovieScreen,
      navigationOptions: {
   
        tabBarLabel: '电影',
        tabBarIcon: ({
   focused, tintColor}) => {
   
          //跟一个方法,参数是一个对象
          return (
            <Image
              source={
   
                focused
                  ? require('./src/statics/images/tarBar/movie_selected.png')
                  : require('./src/statics/images/tarBar/movie_normal.png')
              }
              style={
   {
   tintColor: tintColor, width: 25, height: 25}}
            />
          );
        },
      },
    },
    Mine: {
   
      screen: MineScreen,
      navigationOptions: {
   
        tabBarLabel: '我的',
        tabBarIcon: ({
   focused, tintColor}) => {
   
          //跟一个方法,参数是一个对象
          return (
            <Image
              source={
   
                focused
                  ? require('./src/statics/images/tarBar/mine_selected.png')
                  : require('./src/statics/images/tarBar/mine_normal.png')
              }
              style={
   {
   tintColor: tintColor, width: 25, height: 25}}
            />
          );
        },
      },
    },
  },
  {
   
    tabBarOptions: {
   
      activeTintColor: 'black',
      inactiveTintColor: 'gray',
    },
  },
);

export default createAppContainer(TabBar);

PS:width:25,记住这些样式是不要填写px的.
效果:
在这里插入图片描述

四.增加顶部导航

安装

npm i react-navigation-stack -S

在这里插入图片描述
最后效果:

五.轮播图制作

包名:react-native-looped-carousel
先安装,并导入

//安装
npm install react-native-looped-carousel --save
//导入
import Carousel from 'react-native-looped-carousel';

使用:

{
   /* 2.轮播图 */}
        <View style={
   this.state.size} onLayout={
   this._onLayoutDidChange}>
          <Carousel
            delay={
   3000}
            style={
   this.state.size}
            autoplay
            // pageInfo
            arrows={
   true}
            leftArrowText="<"
            leftArrowStyle={
   {
   color: 'white', fontSize: 30, margin: 20}}
            rightArrowStyle={
   {
   color: 'white', fontSize: 30, margin: 20}}
            rightArrowText="