Skip to content

Commit 907355f

Browse files
shirakabashirakaba
committed
Update README
1 parent 301240f commit 907355f

File tree

2 files changed

+62
-46
lines changed

2 files changed

+62
-46
lines changed

‎packages/bottom-navigation/README.md

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -226,44 +226,52 @@ import { registerBottomNavigation } from '@nativescript-community/ui-material-bo
226226
registerBottomNavigation();
227227
```
228228

229-
When available (I've not implemented it at the time of writing, but intend to in time), it would be best to use this component via the `bottomNavigationNavigatorFactory()` API exported by [React NativeScript Navigation](https://github.com/shirakaba/react-nativescript-navigation/tree/master/react-nativescript-navigation), but here's how to use it directly:
229+
When available (I've not implemented it at the time of writing, but intend to in time), it would be best to use this component via the `bottomNavigationNavigatorFactory()` API exported by [React NativeScript Navigation](https://github.com/shirakaba/react-nativescript-navigation/tree/master/react-nativescript-navigation), as it makes nested navigation easy, but here's how to use it directly:
230230

231231
```tsx
232-
import * as React from "react";
232+
import * as React from 'react';
233+
234+
export function BottomNavigation() {
235+
const [selectedIndex, setSelectedIndex] = React.useState(0);
233236

234-
function ExampleTabs(){
235237
return (
236-
<bottomNavigation selectedIndex={1}>
238+
<bottomNavigation
239+
selectedIndex={selectedIndex}
240+
onSelectedIndexChanged={(args) => {
241+
setSelectedIndex(args.newIndex);
242+
}}
243+
style={{ backgroundColor: 'orange' }}
244+
>
237245
{/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
238-
<tabStrip>
239-
<tabStripItem>
240-
<label>Home</label>
241-
<image src="font://&#xf015;" className="fas"/>
246+
<tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}>
247+
<tabStripItem nodeRole="items">
248+
<label nodeRole="label">Home</label>
249+
<image nodeRole="image" src="font://&#xf015;" className="fas" />
242250
</tabStripItem>
243-
<tabStripItem className="special">
244-
<label>Account</label>
245-
<image src="font://&#xf007;" className="fas"/>
251+
<tabStripItem nodeRole="items">
252+
<label nodeRole="label">Account</label>
253+
<image nodeRole="image" src="font://&#xf007;" className="fas" />
246254
</tabStripItem>
247-
<tabStripItem className="special">
248-
<label>Search</label>
249-
<image src="font://&#xf00e;" className="fas"/>
255+
<tabStripItem nodeRole="items">
256+
<label nodeRole="label">Search</label>
257+
<image nodeRole="image" src="font://&#xf00e;" className="fas" />
250258
</tabStripItem>
251259
</tabStrip>
252260

253261
{/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
254-
<tabContentItem>
255-
<gridLayout>
256-
<label className="h2 text-center">Home Page</label>
262+
<tabContentItem nodeRole="items">
263+
<gridLayout style={{ backgroundColor: 'blue' }}>
264+
<label style={{ color: 'white' }}>Home Page</label>
257265
</gridLayout>
258266
</tabContentItem>
259-
<tabContentItem>
260-
<gridLayout>
261-
<label className="h2 text-center">Account Page</label>
267+
<tabContentItem nodeRole="items">
268+
<gridLayout style={{ backgroundColor: 'cyan' }}>
269+
<label style={{ color: 'black' }}>Account Page</label>
262270
</gridLayout>
263271
</tabContentItem>
264-
<tabContentItem>
265-
<gridLayout>
266-
<label className="h2 text-center">Search Page</label>
272+
<tabContentItem nodeRole="items">
273+
<gridLayout style={{ backgroundColor: 'magenta' }}>
274+
<label style={{ color: 'black' }}>Search Page</label>
267275
</gridLayout>
268276
</tabContentItem>
269277
</bottomNavigation>

‎packages/tabs/README.md

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -226,44 +226,52 @@ import { registerTabs } from '@nativescript-community/ui-material-tabs/react';
226226
registerTabs();
227227
```
228228

229-
Normally it would be best to use this component via the `tabNavigatorFactory()` API exported by [React NativeScript Navigation](https://github.com/shirakaba/react-nativescript-navigation/tree/master/react-nativescript-navigation), but here's how to use it directly:
229+
Normally it would be best to use this component via the `tabNavigatorFactory()` API exported by [React NativeScript Navigation](https://github.com/shirakaba/react-nativescript-navigation/tree/master/react-nativescript-navigation), as it makes nested navigation easy, but here's how to use it directly:
230230

231231
```tsx
232-
import * as React from "react";
232+
import * as React from 'react';
233+
234+
export function Tabs() {
235+
const [selectedIndex, setSelectedIndex] = React.useState(0);
233236

234-
function ExampleTabs(){
235237
return (
236-
<tabs selectedIndex={1}>
238+
<tabs
239+
selectedIndex={selectedIndex}
240+
onSelectedIndexChanged={(args) => {
241+
setSelectedIndex(args.newIndex);
242+
}}
243+
style={{ backgroundColor: 'orange' }}
244+
>
237245
{/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
238-
<tabStrip>
239-
<tabStripItem>
240-
<label>Home</label>
241-
<image src="font://&#xf015;" className="fas"/>
246+
<tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}>
247+
<tabStripItem nodeRole="items">
248+
<label nodeRole="label">Home</label>
249+
<image nodeRole="image" src="font://&#xf015;" className="fas" />
242250
</tabStripItem>
243-
<tabStripItem className="special">
244-
<label>Account</label>
245-
<image src="font://&#xf007;" className="fas"/>
251+
<tabStripItem nodeRole="items">
252+
<label nodeRole="label">Account</label>
253+
<image nodeRole="image" src="font://&#xf007;" className="fas" />
246254
</tabStripItem>
247-
<tabStripItem className="special">
248-
<label>Search</label>
249-
<image src="font://&#xf00e;" className="fas"/>
255+
<tabStripItem nodeRole="items">
256+
<label nodeRole="label">Search</label>
257+
<image nodeRole="image" src="font://&#xf00e;" className="fas" />
250258
</tabStripItem>
251259
</tabStrip>
252260

253261
{/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
254-
<tabContentItem>
255-
<gridLayout>
256-
<label className="h2 text-center">Home Page</label>
262+
<tabContentItem nodeRole="items">
263+
<gridLayout style={{ backgroundColor: 'blue' }}>
264+
<label style={{ color: 'white' }}>Home Page</label>
257265
</gridLayout>
258266
</tabContentItem>
259-
<tabContentItem>
260-
<gridLayout>
261-
<label className="h2 text-center">Account Page</label>
267+
<tabContentItem nodeRole="items">
268+
<gridLayout style={{ backgroundColor: 'cyan' }}>
269+
<label style={{ color: 'black' }}>Account Page</label>
262270
</gridLayout>
263271
</tabContentItem>
264-
<tabContentItem>
265-
<gridLayout>
266-
<label className="h2 text-center">Search Page</label>
272+
<tabContentItem nodeRole="items">
273+
<gridLayout style={{ backgroundColor: 'magenta' }}>
274+
<label style={{ color: 'black' }}>Search Page</label>
267275
</gridLayout>
268276
</tabContentItem>
269277
</tabs>

0 commit comments

Comments
 (0)