[React Native] Basic iOS Routing -- NavigatorIOS
2023-09-14 08:59:19 时间
Inside the app component, we use NavigatiorIOS to render the compoent:
class githubnotetaker extends Component { render() { return ( <NavigatorIOS style={styles.container} initialRoute={{ title: 'Github note taker', component: Main }} /> ); } }
This is like rouer. 'initialRoute': for the initial loading, it will loads 'Main' component by default.
Whole code for index.ios.js:
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, NavigatorIOS } from 'react-native'; import Main from './App/components/main'; const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor: '#111111' }, }); class githubnotetaker extends Component { render() { return ( <NavigatorIOS style={styles.container} initialRoute={{ title: 'Github note taker', component: Main }} /> ); } } AppRegistry.registerComponent('githubnotetaker', () => githubnotetaker);
Main component:
import React, { Component, PropTypes } from 'react'; import { View, Text, StyleSheet } from 'react-native'; var style = StyleSheet.create({ mainContainer: { flex: 1, padding: 30, marginTop: 65, flexDirection: 'column', justifyContent: 'center', backgroundColor: '#48BBEC' }, title: { marginBottom: 20, fontSize: 25, textAlign: 'center', color: '#fff' }, searchInput: { height: 50, padding: 4, marginRight: 5, fontSize: 23, borderWidth: 1, borderColor: 'white', borderRadius: 8, color: 'white' }, buttonText: { fontSize: 18, color: '#111', alignSelf: 'center' }, button: { height: 45, flexDirection: 'row', backgroundColor:'white', borderColor:'white', borderWidth:1, borderRadius:8, marginBottom:10, alignSelf:'stretch', justifyContent:'center' } }); export default class Main extends Component{ render(){ return ( <View style={style.mainContainer}> <Text>Testing the Router</Text> </View> ) } }
We sue 'View', 'Text', 'StyleSheet' from react-native for rendering the content. And apply the styles.
相关文章
- (NO.00001)iOS游戏SpeedBoy Lite成形记(二十九):增加排行榜功能2
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十六)
- React系列——websocket群聊系统在react的实现
- IOS 接ShareSDK问题
- iOS开发之WebView
- IOS平台的几个推送服务的对比
- Ios开发之 -- js和ios的交互
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Native] Writing Platform-Specific Components for iOS and Android in React Native
- [OBJECT-C语言随笔之一]MAC OS 下搭建IOS开发环境
- IOS中 浅谈iOS中MVVM的架构设计与团队协作
- iOS中 蓝牙2.0详解/ios蓝牙设备详解
- 使用subversion管理iOS源代码
- 仿IOS圆形下载进度条
- [React] Using react-styleguidist for Component demo
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- [React Native] Writing Platform-Specific Components for iOS and Android in React Native
- [React Native] Basic iOS Routing -- NavigatorIOS
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- iOS swift5 字典转模型(二)
- ios swift CGFloat转String
- ios swift data dictionary string互转
- ios swift tableView.reloadRows cell重用问题
- swiper.js轮播在iOS下禁用上拉下拉回弹问题解决
- 【读书笔记】iOS-开发技巧-UILabel内容模糊的原因
- 【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.
- 【taro react】---- 编译微信小程序后报错:Error: Minified React error #321;