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 (
    <NavigationContainer>
      <AppStack.Navigator headerMode="none" initialRouteName="Home">
        <AppStack.Screen name="Home" component={Home} />
        <AppStack.Screen name="Message" component={Message} />
        <AppStack.Screen name="Me" component={Me} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
};

在 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: () => <SVG width="20" height="20" svgXmlData={home} />,
        renderSelectedIcon: () => (
          <SVG width="20" height="20" svgXmlData={selectedHome} />
        ),
        onPress: () => this.setState({selectedTab: 'home'}),
        component: <Home />,
      },
      {
        selected: 'message',
        title: '消息',
        renderIcon: () => <SVG width="20" height="20" svgXmlData={message} />,
        renderSelectedIcon: () => (
          <SVG width="20" height="20" svgXmlData={selectedMessage} />
        ),
        onPress: () => this.setState({selectedTab: 'message'}),
        component: <Message />,
      },
      {
        selected: 'me',
        title: '我的',
        renderIcon: () => <SVG width="20" height="20" svgXmlData={me} />,
        renderSelectedIcon: () => (
          <SVG width="20" height="20" svgXmlData={selectedMe} />
        ),
        onPress: () => this.setState({selectedTab: 'me'}),
        component: <Me />,
      },
    ],
  };
  render() {
    const {selectedTab, pages} = this.state;
    return (
      <View style={{flex: 1}}>
        <TabNavigator>
          {pages.map((v, i) => (
            <TabNavigator.Item
              key={i}
              selected={selectedTab === v.selected}
              title={v.title}
              renderIcon={v.renderIcon}
              renderSelectedIcon={v.renderSelectedIcon}
              onPress={v.onPress}
              selectedTitleStyle={{color: '#333333'}}>
              {v.component}
            </TabNavigator.Item>
          ))}
        </TabNavigator>
      </View>
    );
  }
}

并且将 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 (
    <NavigationContainer>
      <AppStack.Navigator headerMode="none" initialRouteName="TabBar">
        <AppStack.Screen name="TabBar" component={TabBar} />
        <AppStack.Screen name="Home" component={Home} />
        <AppStack.Screen name="Message" component={Message} />
        <AppStack.Screen name="Me" component={Me} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
};

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

image.png

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

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