React-Native项目框架搭建

react-native.png

接上一章在完成了React-Native开发环境的搭建后，我们要在通过 npx react-native init rn 命令初始化出来的基本结构上构建项目框架。

首选我们需要将下面这些依赖全部安装上

yarn add react-native-reanimated
yarn add react-native-gesture-handler
yarn add react-native-screens
yarn add react-native-safe-area-context
yarn add @react-native-community/masked-view
yarn add @react-navigation/native
yarn add @react-navigation/stack

接着在 App.js 中编写如下代码

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import Home from './src/views/home/index';
import Message from './src/views/message/index';
import Me from './src/views/me/index';

// 设置react-native路由导航
const AppStack = createStackNavigator();

export default () => {
  return (
    
      
        
        
        
      
    
  );
};

在 ios 目录下执行 pod install 并重启项目，会看到如下界面

image.png

然后我们再来实现底部TabBar。首先安装下面这三个组件。

yarn add react-native-tab-navigator
yarn add react-native-svg
yarn add react-native-svg-uri

安装成功后到 阿里巴巴矢量图标库 寻找合适的图标并复制SVG代码

svg.png

然后创建一个 tabbar.js 文件

import React from 'react';
import {View} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import SVG from 'react-native-svg-uri';
import {
  home,
  selectedHome,
  message,
  selectedMessage,
  me,
  selectedMe,
} from './resources/svg/svg';

import Home from './views/home/index';
import Message from './views/message/index';
import Me from './views/me/index';

export default class TabBar extends React.Component {
  state = {
    selectedTab: 'home',
    pages: [
      {
        selected: 'home',
        title: '首页',
        renderIcon: () => ,
        renderSelectedIcon: () => (
          
        ),
        onPress: () => this.setState({selectedTab: 'home'}),
        component: ,
      },
      {
        selected: 'message',
        title: '消息',
        renderIcon: () => ,
        renderSelectedIcon: () => (
          
        ),
        onPress: () => this.setState({selectedTab: 'message'}),
        component: ,
      },
      {
        selected: 'me',
        title: '我的',
        renderIcon: () => ,
        renderSelectedIcon: () => (
          
        ),
        onPress: () => this.setState({selectedTab: 'me'}),
        component: ,
      },
    ],
  };
  render() {
    const {selectedTab, pages} = this.state;
    return (
      
        
          {pages.map((v, i) => (
            
              {v.component}
            
          ))}
        
      
    );
  }
}

并且将 tabbar.js 的路由加到 App.js 中

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import TabBar from './src/tabbar';
import Home from './src/views/home/index';
import Message from './src/views/message/index';
import Me from './src/views/me/index';

// 设置react-native路由导航
const AppStack = createStackNavigator();

export default () => {
  return (
    
      
        
        
        
        
      
    
  );
};

在 ios 目录下执行 pod install 并重启项目，会看到如下界面

image.png

项目源码地址贴到下面，可下载参考。

链接: https://pan.baidu.com/s/1gSLkQeItBQ22eVbI2gSsdA 密码: kk9f