mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-04-29 21:05:29 +08:00
chore: prepare for stable release (#354)
This commit is contained in:
@@ -2,80 +2,4 @@
|
||||
|
||||
Bottom tab navigator for React Navigation following iOS design guidelines.
|
||||
|
||||
Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/en/next/bottom-tab-navigator.html).
|
||||
|
||||
## Installation
|
||||
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/native @react-navigation/bottom-tabs
|
||||
```
|
||||
|
||||
Now we need to install [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
|
||||
|
||||
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
|
||||
|
||||
```sh
|
||||
expo install react-native-safe-area-context
|
||||
```
|
||||
|
||||
If you are not using Expo, run the following:
|
||||
|
||||
```sh
|
||||
yarn add react-native-safe-area-context
|
||||
```
|
||||
|
||||
If you are using Expo, you are done. Otherwise, continue to the next steps.
|
||||
|
||||
To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
|
||||
|
||||
```sh
|
||||
cd ios
|
||||
pod install
|
||||
cd ..
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { MaterialCommunityIcons } from 'react-native-vector-icons';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
|
||||
const getTabBarIcon = name => ({ color, size }) => (
|
||||
<MaterialCommunityIcons name={name} color={color} size={size} />
|
||||
);
|
||||
|
||||
const BottomTabs = createBottomTabNavigator();
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<BottomTabs.Navigator>
|
||||
<BottomTabs.Screen
|
||||
name="article"
|
||||
component={Article}
|
||||
options={{
|
||||
tabBarLabel: 'Article',
|
||||
tabBarIcon: getTabBarIcon('file-document-box'),
|
||||
}}
|
||||
/>
|
||||
<BottomTabs.Screen
|
||||
name="chat"
|
||||
component={Chat}
|
||||
options={{
|
||||
tabBarLabel: 'Chat',
|
||||
tabBarIcon: getTabBarIcon('message-reply'),
|
||||
}}
|
||||
/>
|
||||
<BottomTabs.Screen
|
||||
name="contacts"
|
||||
component={Contacts}
|
||||
options={{
|
||||
tabBarLabel: 'Contacts',
|
||||
tabBarIcon: getTabBarIcon('contacts'),
|
||||
}}
|
||||
/>
|
||||
</BottomTabs.Navigator>
|
||||
);
|
||||
}
|
||||
```
|
||||
Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/bottom-tab-navigator.html).
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
],
|
||||
"version": "5.0.0-alpha.45",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs",
|
||||
"repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs",
|
||||
"main": "lib/commonjs/index.js",
|
||||
"react-native": "src/index.tsx",
|
||||
"module": "lib/module/index.js",
|
||||
@@ -46,7 +46,7 @@
|
||||
"typescript": "^3.7.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/native": "^5.0.0-alpha.0",
|
||||
"@react-navigation/native": "^5.0.0",
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-safe-area-context": "^0.6.0"
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function SafeAreaProviderCompat({ children }: Props) {
|
||||
if (insets) {
|
||||
// If we already have insets, don't wrap the stack in another safe area provider
|
||||
// This avoids an issue with updates at the cost of potentially incorrect values
|
||||
// https://github.com/react-navigation/navigation-ex/issues/174
|
||||
// https://github.com/react-navigation/react-navigation/issues/174
|
||||
return children;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user