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

写在前面

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

效果图

我的和设置 效果图

“我的”界面

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

render() {
      return (
          <SectionList style={{ backgroundColor: '#eeeeee' }}
              renderItem={this._renderItem}
              renderSectionHeader={({ section: { title } }) => (
                  <View style={styles.sectionHeader} />
              )}
              ItemSeparatorComponent={() =>
                  <View style={{ height: 0.5, backgroundColor: '#999999' }} />
              }
              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 (
              <TouchableHighlight onPress={() => self.onPress(info.item)}>
                  <View style={styles.personInfo}>
                      <Image
                          style={styles.avatar}
                          source={{ uri: 'http://image.iosprogrammer.hongbility.com/react-native/problem-1.png' }}
                          resizeMode='cover'
                      />
                      <View style={styles.nickname}>
                          <View style={{ flex: 1, justifyContent: 'center' }}>
                              <Text>登录/注册</Text>
                          </View>
                          <View style={{ flex: 1, justifyContent: 'center' }}>
                              <Text style={{ color: '#999999' }}>查看个人主页</Text>
                          </View>
                      </View>
                      <Image
                          style={styles.rightArrow}
                          source={require('../../img/right_arrow.png')}
                      />
                  </View>
              </TouchableHighlight>
          )
      } else {
          return (
              <View style={styles.cell}>
                  <SimpleCell
                      title={info.item.name}
                      photo={info.item.photo}
                      onPress={() => self.onPress(info.item)}
                  />
              </View>
          )
      }
  }

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

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 ? <Image style={styles.logo} source={this.props.photo}/> : null
  let detail = this.props.detail ? <View style={styles.detail}> 
  <Text style={{color: '#999999'}}>{this.props.detail}</Text> </View> : null
  return (
    <TouchableHighlight underlayColor='#999' onPress={this.props.onPress}>
      <View style={styles.container}>
        {logo}
        <View style={styles.titleView}>
          <Text>{this.props.title}</Text>
        </View>
        {detail}
        <Image style={styles.rightArrow}
          source={require('../../img/right_arrow.png')}
        />
      </View>
    </TouchableHighlight>
  )
}
}

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

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

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