跟我一起学React Native之我的和设置

写在前面

这篇文章是“跟我一起学react-native”系列文章的第三篇。这系列文章会随着这个新闻项目的进行更新。想要跟我一起学习React Native的朋友可以关注我的微信公众号iOS进阶指南，或者订阅我的个人博客。

效果图

我的和设置 效果图

“我的”界面

1. 使用sectionList实现类似iOS中group类型的tableView

render() {
      return (
           (
                  
              )}
              ItemSeparatorComponent={() =>
                  
              }
              sections={[
                  { data: [{ id: 0 }] },
                  { data: [{ id: 10, name: '关注的新闻', photo: require('../../img/news.png') }] },
                  {
                      data: [{ id: 20, name: '反馈和建议', photo: require('../../img/feedback.png') },
                      { id: 21, name: '设置', photo: require('../../img/setting.png') }]
                  },
              ]}
              keyExtractor={(item) => item.id}
          />
      )
  }

renderItem：渲染每一行；renderSectionHeader：渲染组头视图； ItemSeparatorComponent：每一行之间的分割线，类似iOS中的separator；sections：数据源。id用来区分不同的行。

2. 渲染一行

_renderItem(info) {
      if (info.item.id == 0) {
          return (
               self.onPress(info.item)}>
                  
                      
                      
                          
                              登录/注册
                          
                          
                              查看个人主页
                          
                      
                      
                  
              
          )
      } else {
          return (
              
                   self.onPress(info.item)}
                  />
              
          )
      }
  }

从效果图可以看出，第一组第一行的内容和其他行不相同，因此分开来处理。

TouchableHighlight：这个组件用来接收用户的点击事件。只能有一个子节点。否则会报错
注意：onPress={() => self.onPress(info.item)} 这里用的是self而不是this。self的来源是：

constructor(props) {
  super(props)
  self = this
}

不用this的原因是这里的this表示的不是当前的MeScreen对象，所以如果用this就无法调用到onPress事件。

“SimpleCell”组件

export default class SimpleCell extends React.Component {
render() {
  let logo = this.props.photo ?  : null
  let detail = this.props.detail ?  
  {this.props.detail}  : null
  return (
    
      
        {logo}
        
          {this.props.title}
        
        {detail}
        
      
    
  )
}
}

“我的”中的cell前面有icon，“设置”里面没有，因此这里根据条件判断是否显示。

如遇到问题可以参考遇到的问题和解决方案

如果这篇文章能为你提供些许的帮助，我将不胜荣幸。如果你能慷慨的点个赞或者关注我，我将万分感激。