帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:NAT  uitable  SUP  React Native  Native  Uitableview  react  
Native iOS UITableView for React Native with JSON support and more

  • 源代码名称:react-native-tableview
  • 源代码网址:http://www.github.com/aksonov/react-native-tableview
  • react-native-tableview源代码文档
  • react-native-tableview源代码下载
  • Git URL:
    git://www.github.com/aksonov/react-native-tableview.git
  • Git Clone代码到本地:
    git clone http://www.github.com/aksonov/react-native-tableview
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/aksonov/react-native-tableview
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 响应本机代码

    本机 iOS UITableView支持JSON支持本机

    npm versionnpm downloadscode style: prettier

    电子邮件内容

    特性

    • iOS ,因为它是 ! ( 具有组/普通tableview类型,节标题等)
    • 显示数据丢失的长列表( 像国家列表一样)
    • 内置附件类型( 标记或者公开指示符)
    • 拖到刷新 !
    • 在组件初始化期间自动滚动到初始选择值( 自动聚焦属性)
    • 自动选择带有旧项目de选项的项目选择,参见演示,可以选择 country/state/etc.
    • 呈现本地节索引标题( sectionIndexTitlesEnabled属性)
    • 数据源的本机JSON支持。 如果需要显示大型数据集,生成的Javascript将变得非常大并且影响js加载时间。 为了解决这个问题,组件可以直接从应用程序包读取JSON而不用 JS !
    • 使用NSPredicate语法过滤JSON数据源。 例如你可以只选择给定国家的州( 检查演示)
    • 使用本地语法( tableview,单元格标记) 创建自定义高度的自定义UITableView单元格
    • Use菜单as导航到其他屏幕( 检查包含的演示,使用响应导航 https://reactnavigation.org )
    • 用于 table - 移动/删除选项的本机编辑模式通过使用属性 canMove,canEdit,项目/部分支持

    安装

    安装

    • 使用 npm: npm install react-native-tableview --save
    • 使用纱线:yarn add react-native-tableview

    链接

    • react-native link react-native-tableview
    • 如果失败,请遵循下面的手动链接步骤

    如果你要使用JSON文件,请将它添加到iOS应用程序包

    在你的JS中导入它:

    importTableViewfrom'react-native-tableview'

    手动链接

    • 添加./node_modules/react-native-tableview/RNTableView.xcodeproj
    • 选择XCode项目导航器,选择 Build Phases,并在 Link Binary中选择 Libraries add add
    • 在搜索路径/标题搜索路径部分中的生成设置选项卡中添加 $(SRCROOT)/../node_modules/react-native-tableview ( 确保它是递归的) 。

    支持的样式

    UITableView样式

    这些值提供给 tableViewStyle prop 。

    <TableViewtableViewStyle={TableView.Consts.Style.Grouped}>
    样式值预览
    普通TableView.Consts.Style.Plainalt text
    分组TableView.Consts.Style.Groupedalt text

    UITableViewCell样式

    这些值提供给 tableViewCellStyle prop 。

    <TableViewtableViewCellStyle={TableView.Consts.CellStyle.Default}>
    样式值预览
    默认值TableView.Consts.CellStyle.Defaultalt text
    Value1TableView.Consts.CellStyle.Value1alt text
    Value2TableView.Consts.CellStyle.Value2alt text
    副标题TableView.Consts.CellStyle.Subtitlealt text

    附件类型

    这些值被提供给 Item 上的accessoryType prop 。

    <ItemaccessoryType={TableView.Consts.AccessoryType.None}>
    样式值预览
    TableView.Consts.AccessoryType.Nonealt text
    公开指示器TableView.Consts.AccessoryType.DisclosureIndicatoralt text
    公开按钮TableView.Consts.AccessoryType.DisclosureButtonalt text
    复选标记TableView.Consts.AccessoryType.Checkmarkalt text
    详细按钮TableView.Consts.AccessoryType.DetailButtonalt text

    也可以通过在节中添加 arrow prop来应用公开指示器。

    <Sectionarrow>

    还可以通过在项上添加 selected prop来应用 Checkamrk 。

    <Itemselected>

    道具

    要获得所有组件的完整列表,请查看的定义文件

    下拉列表项格式

    列表中的项可以是 TableView.Item 或者 TableView.Cell 。 一个 Item 只是文本。 一个 Cell 可以是任何复杂的组件。 但是,只有 Item 可以编辑或者移动。 在数据更改方面,Cell的渲染也存在一些问题,可以通过使用。 如果你希望能够呈现。编辑或者移动复杂组件,请使用 reactModuleForCell,在编辑复杂组件中描述。

    示例

    使用大型网络加载列表进行平滑滚动

    demo-3

    state= {loading: true,users: [],
    }asynccomponentWillMount() {
     constresponse = awaitfetch('https://randomuser.me/api/?results=5000')
     constdata = await response.json() this.setState({loading: false,users: data.results.map(a=> ({name:`${a.name.first}${a.name.last}`,id: a.registered,
     })),
     })
    }render() { return (
     <Viewstyle={{flex:1 }}>
     <Textstyle={styles.title}>
     {this.state.loading?'Fetching':'Fetched'} 5000 users
     </Text>
     {this.state.loading && <ActivityIndicator/>} <TableViewstyle={{flex:1 }}tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}> 
     <Section>
     {this.state.users.map(a=> <Itemkey={a.id}>{a.name}</Item>)} </Section>
     </TableView>
     </View>
     )
    }

    应用程序捆绑了带有过滤器的JSON和选择的值

    editing example

    // list spanish provinces and add 'All states' item at the beginningconstcountry ='ES'return (
     <Viewstyle={{flex:1 }}>
     <Textstyle={styles.title}>Showing States in Spain</Text>
     <TableViewstyle={{flex:1 }}json="states"selectedValue="ES53"filter={`country=='${country}'`}tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}onPress={event=>alert(JSON.stringify(event))}/>
     </View>
    )

    内置编辑

    editing example

    render() { return (
     <Viewstyle={{flex:1 }}>
     <TableViewstyle={{flex:1 }}editing={this.props.navigation.state.params.editing}> 
     <SectioncanMovecanEdit>
     <ItemcanEdit={false}>Item 1</Item>
     <Item>Item 2</Item>
     <Item>Item 3</Item>
     <Item>Item 4</Item>
     <Item>Item 5</Item>
     <Item>Item 6</Item>
     <Item>Item 7</Item>
     <Item>Item 8</Item>
     </Section>
     </TableView>
     </View>
     )
    }

    拉刷新

    pull to refresh example

    state= {loading: true,users: [],refreshing: false,amount:10,
    }asynccomponentWillMount() {
     constusers = await this.fetchUsers() this.setState({loading: false, users,
     })
    }fetchUsers=async () => {
     constresponse = awaitfetch('https://randomuser.me/api/?results=10')
     constdata = await response.json()
     return data.results.map(a=> ({name:`${a.name.first}${a.name.last}`,id: a.registered,
     }))
    }fetchMore= () => { this.setState({refreshing: true }, async () => {
     constusers = await this.fetchUsers() this.setState({users: [...users,.. .this.state.users],refreshing: false,amount: this.state.amount +10 })
     })
    }render() { return (
     <Viewstyle={{flex:1 }}>
     <Textstyle={styles.title}>
     {this.state.loading?'Fetching':'Fetched'}{this.state.amount} users
     </Text>
     {this.state.loading && <ActivityIndicator/>} <TableViewstyle={{flex:1 }}tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}canRefreshrefreshing={this.state.refreshing}onRefresh={this.fetchMore}> 
     <Section>{this.state.users.map(a=> <Itemkey={a.id}>{a.name}</Item>)}</Section>
     </TableView>
     </View>
     )
    }

    文档级自定义项

    支持以下样式道具:

    • tableViewCellStyle
    • tableViewCellEditingStyle
    • separatorStyle
    • contentInset
    • contentOffset
    • scrollIndicatorInsets

    颜色:

    • textColor
    • tintColor
    • selectedTextColor
    • detailTextColor
    • separatorColor
    • headerTextColor
    • footerTextColor

    基本字体:

    • fontSize
    • fontWeight
    • fontStyle
    • fontFamily

    "字幕"字体:

    • detailFontSize
    • detailFontWeight
    • detailFontStyle
    • detailFontFamily

    标题字体:

    • headerFontSize
    • headerFontWeight
    • headerFontStyle
    • headerFontFamily

    页脚字体:

    • footerFontSize
    • footerFontWeight
    • footerFontStyle
    • footerFontFamily

    图像/图标

    一个 Item 组件接受 image 和可选的imageWidth prop 。

    image prop可以是指向"资产目录"中的资产的NAME的字符串。 在这种情况下,推荐使用 imageWidth

    ;<Item image="icon-success.png" imageWidth={40}/>

    Alernatively,你可以从你的本地应用代码中 require 。 在这种情况下,imageWidth 是不必要的。

    ;<Item image={require('../images/icon-success.png')}/>

    可以编辑复杂组件

    只有 Item 可以编辑或者移动。 但是,你可以创建一个使用 reactModuleForCell 引用的复杂组件。 你需要做一些事情来设置这个。

    • AppDelegate.m 添加一些行
    • 编写视图组件。
    • 将视图组件的NAME 作为 <TableView> 组件的支柱传递。
    • 创建一个 <Item>的列表,传递给视图组件的道具。
    • register 视图组件作为 App root 视图。
    • 修改 AppDelegate.m

    将以下导入语句添加到 file: 顶部的其他导入语句中

    #import<RNTableView/RNAppGlobals.h>

    添加以下两行

    //Save main bridge so that RNTableView could access our bridge to create its RNReactModuleCells[[RNAppGlobals sharedInstance] setAppBridge:rootView.bridge];

    在文件底部附近的self.window = 行之前。 如果还没有这样做,请添加标题搜索路径,如开始

    编写你的单元格视图组件。

    比如,

    //Should be pure... setState on top-level component doesn't seem to workclassTableViewExampleCellextendsReact.Component {
     render() {
     varstyle= {borderColor:'#aaaaaa',borderWidth:1,borderRadius:3 }// Fill the full native table cell height. style.flex =1// All Item props get passed to this cell inside this.props.data. Use them to control the rendering, for example background color:if (this.props.data.backgroundColor!== undefined) { style.backgroundColor = this.props.data.backgroundColor } return (
     <Viewstyle={style}>
     <Text>
     section:{this.props.section},row:{this.props.row},label:{this.props.data.label} </Text>
     <Text> message:{this.props.data.message}</Text>
     </View>
     )
     }
    }

    有关更多示例,请参见示例/tableviewdemo 。

    传递组件作为 prop 。
    <TableViewreactModuleForCell="TableViewExampleCell"> 
    创建项目列表,传递道具
    ;<Section canEdit={true}> {this.props.items.map(function(item) { return (
     <Itemkey={'i' + item.data.date}label={item.label}message={item.message}/>
     )
     })}</Section>

    注意,你传递的道具必须是基元类型: 它们是对象的属性。注意,这些道具成为 reactModuleForCell 组件中 data 道具的属性。 也就是说,通过 label="foo" 并在你的组件中获取 this.props.data.label

    register 你的组件。

    呈现的每个单元格都成为 reuseable root 视图或者 App

    var { AppRegistry } = React;...AppRegistry.registerComponent('TableViewExample', () => TableViewExample);

    调试时,你将看到消息:

    Running application"TableViewExample" with appParams: {/* params */}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

    多次。虽然有些烦人,但这似乎并不影响性能。 你还可能看到消息不平衡调用标记 5的开始/结束。



    文章标签:SUP  react  NAT  Native  React Native  uitable  Uitableview  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语