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
