推荐开源项目:react-native-tab - 简单高效的React Native标签页组件
import React from 'react';
import { View, Text } from 'react-native';
import { Scene, Tabs, Router } from 'react-native-router-flux';
const Home = () => <View><Text>Home</Text></View>;
const Settings = () => <View><Text>Settings</Text></View>;
const Primary = () => (
<Tabs
tabBarStyle={{ backgroundColor: '#ddd' }}
tabBarPosition="bottom"
lazy={true}
pressOpacity={0.8}
animated={true}
>
<Scene
key="home"
component={Home}
title="Home"
icon={() => <Icon name="home" />}
/>
<Scene
key="settings"
component={Settings}
title="Settings"
icon={() => <Icon name="settings" />}
/>
</Tabs>
);
export default () => (
<Router sceneStyle={{ paddingTop: 64 }}>
<Scene key="root">
<Scene key="primary" component={Primary} />
</Scene>
</Router>
);
这个代码实例展示了如何在React Native应用中使用react-native-router-flux
库创建一个带有底部标签栏的应用。Tabs
组件被用来定义标签页,每个标签页由一个Scene
组件表示,并且可以自定义图标和标题。这个例子简洁明了,并且教会了如何组织代码以便于后续的维护和扩展。
评论已关闭