import { RenderScreen } from 'react-native-router-screen';
function Screen(): JSX.Element {
const Render = new RenderScreen()
return (
<Render.Render>
<Render.screen
path={'/home'}
title='Home'
navbar={<Navbar/>}
// hasNavbar={true}
isPrivate={true}
privateState={true}
screen={Home}
/>
<Render.screen
title='Settings'
// hasNavbar={true}
path={'/settings'}
screen={Settings}
/>
<Render.screen
title='About'
// hasNavbar={true}
path={'/about'}
screen={About}
/>
</Render.Render>
);
};
pass parameter:
Property | Description |
path | A string representing a path or identifier for the component. |
screen | A function that takes props and returns a React element. Used to define the content or component to be rendered in the screen. |
title | A string representing the title or heading for the component. |
navbar | (Optional) A function that renders a navigation bar or header component. It takes props and returns a React element. Default: Prebuilt navbar |
footer | (Optional) A function for rendering a footer component. It takes props and returns a React element. |
isPrivate | A boolean flag that may indicate whether this component requires authentication or authorization to access. It can be used to control access to the component. |
privateState | A boolean flag that represents the private state of the component. It could be used to determine if the user is currently authenticated or authorized to access the component. |
hasFooter | A boolean flag that controls whether the component should include a footer. It can be used to toggle the presence of a footer. |
hasNavbar | A boolean flag that controls whether the component should include a navigation bar or header. It can be used to toggle the presence of a navigation bar. |
drawerConfig | Drawer configure |
const Home = (props: ScreenProps) => {
const router = useRouter()
const drawer = userDrawer()
useEffect(() => {
drawer.setDrawerConfig({
renderNavigationView: <HomeDrawer />
})
}, [])
return (
<View>
<StyleText>
Home
</StyleText>
<Link href = '/about'>
About
</Link>
<Button
title = 'Home'
onPress = {() => {
router.push('/settings/435345')
}}
/>
</View>
)
}
Screen component props(ScreenProps)
Property | Type | Description |
loadingComponent | boolean | Represents whether a loading component should be displayed. |
setTitle | (title: string) => void | Function to set the title of the component or page. |
setLoadingComponent | React.Dispatch<React.SetStateAction<boolean>> | Setter function for updating the loadingComponent state. |
customDynamicNavbar | React.ReactNode | Custom React node representing a dynamic navigation bar. |
setCustomDynamicNavbar | React.Dispatch<React.SetStateAction<React.ReactNode>> | Setter function for updating the customDynamicNavbar state. |
params | { [key: string]: any } | An object containing key-value pairs for additional parameters. |
|