行业资讯
react Native UI Component
你问的React Native UI ComponentUI 组件可以理解为用 JavaScript/TypeScript 写的跨平台界面组件最终映射成 iOS/Android 原生控件显示。React Native 的 UI 组件大致分几层1. 基础 UI Components官方内置React Native 自带一套基础组件View最核心容器类似 Web 的divimport { View } from react-native; View TextHello/Text /View对应Android →android.view.ViewiOS →UIViewText文本Text Hello React Native /Text对应Android →TextViewiOS →UILabelImage图片Image source{{uri:https://xxx.com/a.png}} style{{width:100,height:100}} /对应Android → ImageViewiOS → UIImageViewTextInput输入框TextInput placeholder请输入 /对应Android → EditTextiOS → UITextFieldButton按钮Button title点击 onPress{(){}} /ScrollView滚动ScrollView Text内容/Text /ScrollViewFlatList高性能列表类似 RecyclerViewFlatList data{users} renderItem{({item}) Text{item.name}/Text } /对应Android → RecyclerViewiOS → UICollectionView2. React Native UI 组件结构一个 RN 组件JS/TS | | props | React Component | Shadow Tree | Yoga Layout | Native UI Manager | ---------------- Android View iOS UIView ----------------例如View style{{ width:100, height:100, backgroundColor:red }} /View流程JS ↓ View组件 ↓ RN Bridge / Fabric ↓ Android ViewGroup ↓ 屏幕显示红色方块3. 自定义 UI Component比如封装一个按钮MyButton.tsximport { TouchableOpacity, Text } from react-native; export default function MyButton(){ return ( TouchableOpacity Text 登录 /Text /TouchableOpacity ) }使用MyButton /4. Native UI Component原生组件如果 RN 没有提供比如地图视频播放器摄像头蓝牙支付控件需要写 Native Module结构React Native | | Native UI Component | ---------------------- Android iOS Kotlin Swift/ObjC View UIView例如JS:MapView /实际上Android:class MapView : View { }iOS:class MapView:UIView { }5. React Native 新架构 Fabric UI Component现在 RN 新架构React Component | | Fabric Renderer | | C Shadow Tree | | Native Component相比旧架构旧JS | Bridge(JSON) | Native新JS | JSI | C | Native优势更快少 JSON 序列化UI 更新同步性更好6. 常用第三方 UI 组件库实际开发一般不会全手写Material DesignReact Native PaperButton modecontained 登录 /Button跨平台组件NativeBase提供ButtonModalToastForm高质量商业级Tamagui支持React NativeWeb7. RN UI Component 和 Web React Component 区别React WebReact NativedivViewspanTextimgImageinputTextInputbuttonButtonCSSStyleSheet例如Web:div classbox Hello /divRN:View style{styles.box} TextHello/Text /View如果你之前关注RN EventEmitter 双向通信、Native Module 注册流程那么 UI Component 下一步通常就是学习JS Component | Native UI Manager | ViewManager | Android View / iOS UIView也就是React Native 原生 UI 组件开发流程。
郑州网站建设
网页设计
企业官网
