├── .babelrc ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── __tests__ ├── index.android.js └── index.ios.js ├── assets ├── back_arrow.png ├── back_arrow@2x.png └── back_arrow@3x.png ├── docs └── .gitkeep ├── example ├── App.js ├── components │ ├── Page.js │ └── StyleSheet.js ├── page │ ├── ActionSheet.js │ ├── Article.js │ ├── Button.js │ ├── Cell.js │ ├── Dialog.js │ ├── Grid.js │ ├── Icons.js │ ├── Msg.js │ ├── Panel.js │ ├── Progress.js │ ├── SearchBar.js │ ├── Tab.js │ ├── Toast.js │ └── nameDB.js └── routes.js ├── fonts └── Weui.ttf ├── index.android.js ├── index.ios.js ├── package.json ├── src ├── ActionSheet │ ├── ActionSheet.js │ └── index.js ├── Article │ ├── Article.js │ ├── H1.js │ ├── H2.js │ ├── H3.js │ ├── P.js │ ├── Section.js │ └── index.js ├── Badge │ ├── Badge.js │ └── index.js ├── Button │ ├── Button.js │ ├── ButtonArea.js │ ├── ButtonPreview.js │ ├── ButtonText.js │ ├── index.js │ └── variable.js ├── Cell │ ├── Cell.js │ ├── CellBody.js │ ├── CellFooter.js │ ├── CellHeader.js │ ├── CellText.js │ ├── Cells.js │ ├── CellsTips.js │ ├── CellsTitle.js │ ├── index.js │ └── variable.js ├── Dialog │ ├── Dialog.js │ ├── index.js │ └── variable.js ├── Flex │ ├── Flex.js │ ├── FlexItem.js │ └── index.js ├── Form │ ├── Agreement.js │ ├── CheckboxCells.js │ ├── Input.js │ ├── Label.js │ ├── RadioCells.js │ ├── Select.js │ ├── Slider.js │ ├── Switch.js │ ├── TextArea.js │ ├── Uploader.js │ ├── index.js │ └── variable.js ├── Gallery │ ├── Gallery.js │ ├── GalleryDelete.js │ └── index.js ├── Grid │ ├── Grid.js │ ├── GridIcon.js │ ├── GridLabel.js │ ├── Grids.js │ ├── index.js │ └── variable.js ├── Icon │ ├── Icon.js │ ├── Weui.js │ ├── index.js │ └── lib │ │ ├── create-icon-set-from-fontello.js │ │ ├── create-icon-set-from-icomoon.js │ │ ├── create-icon-set.js │ │ ├── generate-icon-set-from-css.js │ │ ├── icon-button.js │ │ ├── react-native.js │ │ ├── react-native.osx.js │ │ ├── tab-bar-item-ios.js │ │ └── toolbar-android.js ├── LoadMore │ ├── LoadMore.js │ └── index.js ├── Mask │ ├── Mask.js │ └── index.js ├── Media │ ├── Media.js │ ├── MediaBody.js │ ├── MediaDesc.js │ ├── MediaHeader.js │ ├── MediaInfo.js │ ├── MediaInfoMeta.js │ ├── MediaTitle.js │ └── index.js ├── Msg │ ├── Msg.js │ ├── index.js │ └── variable.js ├── Panel │ ├── Panel.js │ ├── PanelBody.js │ ├── PanelFooter.js │ ├── PanelHeader.js │ └── index.js ├── Picker │ ├── Picker.js │ ├── PickerSection.js │ └── index.js ├── Popup │ ├── Popup.js │ ├── PopupHeader.js │ └── index.js ├── Preview │ ├── Preview.js │ ├── PreviewBody.js │ ├── PreviewFooter.js │ ├── PreviewHeader.js │ ├── PreviewItem.js │ ├── PreviewLabel.js │ ├── PreviewValue.js │ └── index.js ├── Progress │ ├── Progress.js │ ├── index.js │ └── variable.js ├── SearchBar │ ├── SearchBar.js │ └── index.js ├── StyleSheet │ └── index.js ├── Tab │ ├── NavBar.js │ ├── TabBar.js │ └── index.js ├── Text │ └── index.js ├── Toast │ ├── Toast.js │ └── index.js ├── Toptips │ ├── Toptips.js │ └── index.js ├── index.js ├── patch.js └── variable.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { "es6": true }, 3 | "extends": "airbnb", 4 | "parser": "babel-eslint", 5 | "rules": { 6 | "comma-dangle": 0, # 松散行尾逗号 7 | "semi": [2, "never"], # 不允许分号 8 | "no-underscore-dangle": 0, # 允许 _ 9 | "global-require": 0, # 允许 require 10 | "react/jsx-first-prop-new-line": 0, # 属性不需另起一行 11 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], # js 扩展名 12 | "jsx-a11y/no-static-element-interactions": 0, 13 | "react/forbid-prop-types": 0, 14 | "import/prefer-default-export": 0, 15 | "import/no-unresolved": [2, { ignore: ['\.(png || jpg || gif)$'] }], # 忽略 require 图片的错误 16 | 17 | # "id-length": 0, 18 | # "no-param-reassign": [2, { "props": false }], # 参数不可修改，属性可修改 19 | # "global-require": 0, 20 | # "no-class-assign": 0, 21 | # "react/prop-types": 0, 22 | # "react/prefer-stateless-function": 0, 23 | # "react/jsx-no-bind": 0 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | android/app/libs 42 | *.keystore 43 | 44 | # Custom 45 | /android 46 | /ios 47 | /lib 48 | .*config 49 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | android/ 2 | docs/ 3 | example/ 4 | ios/ 5 | .*rc 6 | .*config 7 | .index.*.js 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | script: 5 | - npm run lint 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rn-weui [![Build Status](https://travis-ci.org/maskzh/rn-weui.svg?branch=master)](https://travis-ci.org/maskzh/rn-weui) [![npm version](https://img.shields.io/npm/v/rn-weui.svg)](https://www.npmjs.org/package/rn-weui) 2 | 一套基于 [Weui](https://github.com/weui/weui) 的 React Native 组件库 3 | 4 | ### 目录结构 5 | 6 | ``` 7 | rn-weui 8 | ├── README.md 9 | ├── assets # 资源 10 | ├── docs # 文档说明 11 | ├── fonts # 字体 12 | ├── example # 示例代码 13 | ├── package.json # package.json 14 | ├── src # rn-weui 组件源码 15 | └── test # 测试文件 16 | ``` 17 | 18 | ### 安装 19 | ```shell 20 | # install 21 | npm i rn-weui --save 22 | 23 | # link 24 | rnpm link 25 | rnpm link react-native-image-picker 26 | ``` 27 | For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions 28 | 29 | ### 使用 30 | ```js 31 | import { Button } from 'rn-weui' 32 | export default () => 33 | 34 | ``` 35 | 36 | 50 | 51 | ### TODO 52 | - [x] Grid 53 | - [x] Button 54 | - [x] Toast 55 | - [x] Msg 56 | - [x] Article 57 | - [x] Icons 58 | - [x] Panel 59 | - [x] Progress 60 | - [x] Tab 61 | - [x] ActionSheet 62 | - [x] Dialog 63 | - [x] SearchBar 64 | - [x] Cell 65 | - [x] Slider 66 | - [x] Preview 67 | - [x] Mask 68 | - [x] Popup 69 | - [x] LoadMore 70 | - [x] Gallery 71 | - [x] Flex 72 | - [x] Badge 73 | - [x] Agreement 74 | - [x] Picker 75 | - [x] Select 76 | - [x] Toptips 77 | - [ ] example 78 | 79 | ### License 80 | The MIT License(http://opensource.org/licenses/MIT) 81 | -------------------------------------------------------------------------------- /__tests__/index.android.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.android.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /__tests__/index.ios.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.ios.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /assets/back_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maskzh/rn-weui/54f94179a9b31cb5926a5ccd657bc3eb95bace20/assets/back_arrow.png -------------------------------------------------------------------------------- /assets/back_arrow@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maskzh/rn-weui/54f94179a9b31cb5926a5ccd657bc3eb95bace20/assets/back_arrow@2x.png -------------------------------------------------------------------------------- /assets/back_arrow@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maskzh/rn-weui/54f94179a9b31cb5926a5ccd657bc3eb95bace20/assets/back_arrow@3x.png -------------------------------------------------------------------------------- /docs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maskzh/rn-weui/54f94179a9b31cb5926a5ccd657bc3eb95bace20/docs/.gitkeep -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Navigator } from 'react-native' 3 | import routes from './routes' 4 | 5 | const App = () => { 6 | const renderScene = (route, navigator) => { 7 | const routeConfig = routes[route.to] 8 | if (!routeConfig) return navigator.pop() 9 | const currentRoute = { ...routeConfig, ...route } 10 | return 11 | } 12 | 13 | const configureScene = (route) => { 14 | const currentRoute = { ...(routes[route.to] || {}), ...route } 15 | const { scene = 'PushFromRight' } = currentRoute 16 | return Navigator.SceneConfigs[scene] 17 | } 18 | 19 | return ( 20 | 26 | ) 27 | } 28 | 29 | export default App 30 | -------------------------------------------------------------------------------- /example/components/Page.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react' 2 | import { View, StyleSheet } from 'react-native' 3 | 4 | const styles = StyleSheet.create({ 5 | page: { 6 | paddingTop: 64, 7 | backgroundColor: '#fbf9fe' 8 | }, 9 | spacing: { 10 | paddingLeft: 15, 11 | paddingRight: 15, 12 | } 13 | }) 14 | 15 | const Page = (props) => { 16 | const { 17 | spacing, 18 | style, 19 | children 20 | } = props 21 | 22 | return ( 23 | {children} 24 | ) 25 | } 26 | 27 | Page.propTypes = { 28 | spacing: PropTypes.bool, 29 | style: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.number]), 30 | children: PropTypes.node, 31 | } 32 | 33 | export default Page 34 | -------------------------------------------------------------------------------- /example/components/StyleSheet.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Platform } from 'react-native' 2 | 3 | export function create(styles) { 4 | const platformStyles = {} 5 | Object.keys(styles).forEach((name) => { 6 | const { ios, android } = { ...styles[name] } 7 | let { ...style } = { ...styles[name] } 8 | if (ios && Platform.OS === 'ios') { 9 | style = { ...style, ...ios } 10 | } 11 | if (android && Platform.OS === 'android') { 12 | style = { ...style, ...android } 13 | } 14 | platformStyles[name] = style 15 | }) 16 | return StyleSheet.create(platformStyles) 17 | } 18 | 19 | export default {...StyleSheet, create } 20 | -------------------------------------------------------------------------------- /example/page/ActionSheet.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { 3 | StyleSheet, 4 | View, 5 | } from 'react-native' 6 | import { ButtonArea, Button, ActionSheet, Popup, PopupHeader, Gallery, GalleryDelete } from '../../src' 7 | 8 | const styles = StyleSheet.create({ 9 | wrapper: { 10 | flex: 1, 11 | paddingTop: 204, 12 | backgroundColor: '#fbf9fe', 13 | }, 14 | }) 15 | 16 | class ActionSheetScene extends Component { 17 | constructor(props) { 18 | super(props) 19 | this.state = { 20 | visible: false, 21 | popupVisible: false, 22 | galleryVisible: false, 23 | } 24 | this.showActionSheet = this.showActionSheet.bind(this) 25 | this.hideActionSheet = this.hideActionSheet.bind(this) 26 | } 27 | showActionSheet() { 28 | this.setState({ 29 | visible: true, 30 | }) 31 | } 32 | hideActionSheet() { 33 | this.setState({ 34 | visible: false, 35 | }) 36 | } 37 | render() { 38 | return ( 39 | 40 | 41 | 45 | 46 | 47 | 51 | 52 | 53 | 57 | 58 | 82 | this.setState({ popupVisible: false })} 85 | > 86 | 87 | 88 | 92 | 93 | 94 | this.setState({ galleryVisible: false })} 98 | > console.log('1')} /> 99 | 100 | ) 101 | } 102 | } 103 | 104 | export default ActionSheetScene 105 | -------------------------------------------------------------------------------- /example/page/Article.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | StyleSheet, 4 | View, 5 | } from 'react-native' 6 | import { 7 | Article, 8 | Section, 9 | H1, 10 | H2, 11 | H3, 12 | P, 13 | // Text 14 | LoadMore, 15 | Preview, 16 | PreviewHeader, 17 | PreviewBody, 18 | PreviewFooter, 19 | PreviewItem, 20 | PreviewLabel, 21 | PreviewValue, 22 | ButtonPreview, 23 | } from '../../src' 24 | 25 | 26 | const styles = StyleSheet.create({ 27 | wrapper: { 28 | flex: 1, 29 | backgroundColor: '#fbf9fe', 30 | }, 31 | }) 32 | 33 | 34 | const ArticleScene = () => 35 | 36 |
37 |

大标题

38 |
39 |

章标题

40 |
41 |

小标题

42 |

43 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, 44 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 45 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 46 | nisi ut aliquip ex ea commodo consequat. Duis aute 47 |

48 |

49 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, 50 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 51 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 52 | nisi ut aliquip ex ea commodo consequat. Duis aute 53 |

54 |
55 |
56 | Loading 57 | No Data 58 | 59 |
60 | 61 | 62 | 63 | Total 64 | $44.50 65 | 66 | 67 | 68 | 69 | Product 70 | Name 71 | 72 | 73 | Description 74 | Cras sit amet nibh libero, in gravida 75 | 76 | 77 | Details 78 | 79 | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 80 | 81 | 82 | 83 | 84 | Action 85 | 86 | 87 | 88 | 89 | 90 | Total 91 | $44.50 92 | 93 | 94 | 95 | 96 | Product 97 | Name 98 | 99 | 100 | Description 101 | Cras sit amet nibh libero, in gravida 102 | 103 | 104 | Details 105 | 106 | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 107 | 108 | 109 | 110 | 111 | Action 112 | Action 113 | 114 | 115 | 116 | 117 | export default ArticleScene 118 | -------------------------------------------------------------------------------- /example/page/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, ScrollView } from 'react-native' 3 | import NavigationBar from 'react-native-navbar' 4 | import { ButtonArea, Button } from '../../src' 5 | import S from 'react-native-stylekit' 6 | 7 | const ButtonScene = ({ navigator }) => { 8 | const NavigationBarProps = { 9 | leftButton: { 10 | title: '返回', 11 | handler() { 12 | navigator.pop() 13 | }, 14 | }, 15 | title: { 16 | title: 'Button', 17 | } 18 | } 19 | 20 | return ( 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ) 52 | } 53 | 54 | export default ButtonScene 55 | -------------------------------------------------------------------------------- /example/page/Cell.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { 3 | StyleSheet, 4 | ScrollView, 5 | View, 6 | Image, 7 | Text, 8 | } from 'react-native' 9 | import { 10 | Cells, 11 | CellsTitle, 12 | CellsTips, 13 | Cell, 14 | CellHeader, 15 | CellBody, 16 | CellFooter, 17 | CellText, 18 | Input, 19 | Label, 20 | TextArea, 21 | Switch, 22 | RadioCells, 23 | CheckboxCells, 24 | Uploader, 25 | Select, 26 | Slider, 27 | Badge, 28 | Agreement, 29 | Gallery, 30 | GalleryDelete, 31 | Picker, 32 | Toptips 33 | } from '../../src' 34 | 35 | const styles = StyleSheet.create({ 36 | wrapper: { 37 | flex: 1, 38 | backgroundColor: '#fbf9fe', 39 | }, 40 | }) 41 | 42 | const pickerData1 = [ 43 | [{ label: '1', value: '1' }, { label: '2', value: '2' }, { label: '3', value: '3' }], 44 | [{ label: '4', value: '4' }, { label: '5', value: '5' }, { label: '6', value: '6' }], 45 | [{ label: '7', value: '7' }, { label: '8', value: '8' }, { label: '9', value: '9' }], 46 | ] 47 | 48 | const pickerData2 = [{ 49 | label: 'a', 50 | value: 'value of a', 51 | children: [{ 52 | label: 'a-a', 53 | value: 'value of a-a' 54 | }, { 55 | label: 'a-b', 56 | value: 'value of a-b', 57 | children: [{ 58 | label: 'a-b-a', 59 | value: 'value of a-b-a' 60 | }, { 61 | label: 'a-b-b', 62 | value: 'value of a-b-b' 63 | }] 64 | }] 65 | }, { 66 | label: 'b', 67 | value: 'value of b', 68 | children: [{ 69 | label: 'b-a', 70 | value: 'value of b-a', 71 | children: [{ 72 | label: 'b-a-a', 73 | value: 'value of b-a-a' 74 | }, { 75 | label: 'b-a-b', 76 | value: 'value of b-a-b' 77 | }] 78 | }, { 79 | label: 'b-b', 80 | value: 'value of b-b', 81 | children: [{ 82 | label: 'b-b-a', 83 | value: 'value of b-b-a' 84 | }, { 85 | label: 'b-b-b', 86 | value: 'value of b-b-b' 87 | }] 88 | }] 89 | }] 90 | 91 | const pickerData3 = [{ 92 | label: '北京', 93 | value: '1', 94 | children: [{ 95 | label: '上海', 96 | value: '2', 97 | children: [{ 98 | label: '浦东', 99 | value: '4', 100 | children: [] 101 | }] 102 | }, { 103 | label: '天津', 104 | value: '3', 105 | children: [{ 106 | label: '天行', 107 | value: '5', 108 | children: [] 109 | }] 110 | }] 111 | }] 112 | 113 | // const selectedValue = ['value of b', 'value of b-b', 'value of b-b-b'] 114 | 115 | class CellScene extends Component { 116 | constructor() { 117 | super() 118 | this.state = { 119 | files: [], 120 | radio: '', 121 | checkbox: [1], 122 | text: '默认', 123 | switchValue: false, 124 | textarea: '', 125 | selectedValue: ['', '', ''], 126 | select: ['', '', ''], 127 | selectLabel: [], 128 | sliderValue: 5, 129 | galleryVisible: false, 130 | agreement: false, 131 | pickerVisible: false, 132 | picker: ['', '', ''], 133 | toptipsVisible: false, 134 | } 135 | this.setSelect = this.setSelect.bind(this) 136 | this.handleUploadChange = this.handleUploadChange.bind(this) 137 | this.handleRadioChange = this.handleRadioChange.bind(this) 138 | this.handleCheckboxChange = this.handleCheckboxChange.bind(this) 139 | this.handleSwitchChange = this.handleSwitchChange.bind(this) 140 | this.handleTextareaChange = this.handleTextareaChange.bind(this) 141 | this.handleSelectChange = this.handleSelectChange.bind(this) 142 | this.handleSliderChange = this.handleSliderChange.bind(this) 143 | this.updateState = this.updateState.bind(this) 144 | this.onToptipsShow = this.onToptipsShow.bind(this) 145 | } 146 | setSelect(value) { 147 | this.setState({ select: value }) 148 | } 149 | updateState(key, value) { 150 | this.setState({ [key]: value }) 151 | } 152 | handleUploadChange(files) { 153 | this.setState({ files }) 154 | } 155 | handleRadioChange(radio) { 156 | this.setState({ radio }) 157 | } 158 | handleCheckboxChange(checkbox) { 159 | this.setState({ checkbox }) 160 | } 161 | handleChangeText(text) { 162 | this.setState({ text }) 163 | } 164 | handleSwitchChange(switchValue) { 165 | this.setState({ switchValue }) 166 | } 167 | handleTextareaChange(textarea) { 168 | this.setState({ textarea }) 169 | } 170 | handleSelectChange(value) { 171 | this.setState({ selectedValue: value }) 172 | } 173 | handleSliderChange(value) { 174 | this.setState({ sliderValue: value }) 175 | } 176 | onToptipsShow() { 177 | this.setState({ toptipsVisible: true }) 178 | setTimeout(() => this.setState({ toptipsVisible: false }), 3000) 179 | } 180 | render() { 181 | return ( 182 | 183 | 带说明的列表项 184 | 185 | 186 | 标题文字 187 | 说明文字 188 | 189 | 190 | 带图标、说明的列表项 191 | 192 | 193 | 194 | 195 | 196 | 标题文字 197 | 说明文字 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 标题文字News 206 | 207 | 208 | 209 | 说明文字8 210 | 211 | 212 | 213 | 带跳转的列表项 214 | 215 | {}}> 216 | 标题文字 217 | 218 | 219 | {}}> 220 | 标题文字 221 | 222 | 223 | 224 | 带说明、跳转的列表项 225 | 226 | {}}> 227 | 标题文字 228 | 说明文字 229 | 230 | {}}> 231 | 标题文字 232 | 说明文字 233 | 234 | 235 | 带图标、说明、跳转的列表项 236 | 237 | {}}> 238 | 239 | 240 | 241 | 标题文字 242 | 说明文字 243 | 244 | {}}> 245 | 246 | 247 | 248 | 标题文字 249 | 说明文字 250 | 251 | 252 | 单选列表项 253 | 266 | {}}> 267 | more 268 | 269 | 270 | 复选列表项 271 | 285 | 开关 286 | 287 | 288 | 标题文字 289 | 293 | 294 | 295 | 表单 296 | 297 | 298 | 299 | 300 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 底部说明文字底部说明文字 314 | 315 | 图片上传 316 | 317 | 318 | 319 | this.setState({ file, galleryVisible: true })} 324 | /> 325 | this.setState({ galleryVisible: false })} 329 | > 330 | { 332 | this.handleUploadChange( 333 | this.state.files.filter(file => file.uri !== this.state.file.uri)) 334 | this.setState({ galleryVisible: false }) 335 | }} 336 | /> 337 | 338 | 339 | 340 | 341 | 342 | 文本域 343 | 344 | 345 | 346 |