rn-project/src/pages/icon.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-navigation';

import BaseStyle from '../constants/Style';

export default class Icon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      iconArray: [
        {
          icon: '\ue629',
          iconText: '',
          icon2: '\ue612',
          iconText2: '',
          icon3: '\ue619',
          iconText3: '',
          icon4: '\ue615',
          iconText4: '',
        },
        {
          icon: '\ue605',
          iconText: '',
          icon2: '\ue601',
          iconText2: '',
          icon3: '\ue60d',
          iconText3: '',
          icon4: '\ue7de',
          iconText4: '',
        },
        {
          icon: '\ue674',
          iconText: '',
          icon2: '\ue656',
          iconText2: '',
          icon3: '\ue626',
          iconText3: '',
          icon4: '\ue624',
          iconText4: '',
        },
        {
          icon: '\ue61e',
          iconText: '',
          icon2: '\ue61d',
          iconText2: '',
          icon3: '\ue618',
          iconText3: '',
          icon4: '\ue655',
          iconText4: '',
        },
        {
          icon: '\ue625',
          iconText: '',
          icon2: '\ue623',
          iconText2: '',
          icon3: '\ue620',
          iconText3: '',
          icon4: '\ue672',
          iconText4: '',
        },
        {
          icon: '\ue602',
          iconText: '',
          icon2: '\ue640',
          iconText2: '',
          icon3: '\ue613',
          iconText3: '',
          icon4: '\ue614',
          iconText4: '',
        },
        {
          icon: '\ue627',
          iconText: '',
          icon2: '\ue663',
          iconText2: '',
          icon3: '\ue62c',
          iconText3: '',
          icon4: '\ue621',
          iconText4: '',
        },
        {
          icon: '\ue6a2',
          iconText: '',
          icon2: '\ue647',
          iconText2: '',
          icon3: '\ue611',
          iconText3: '',
          icon4: '\ue68c',
          iconText4: '',
        },
        {
          icon: '\ue61b',
          iconText: '',
          icon2: '\ue616',
          iconText2: '',
        },
      ],
    };
  }

  render() {
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <ScrollView>
          <View style={styles.container}>
            {this.state.iconArray.map(k => {
              return (
                <View style={styles.row} key={k.icon + '_'}>
                  <View style={styles.items}>
                    <Text style={styles.icont}>{k.icon}</Text>
                    <Text style={styles.font}>{k.iconText}</Text>
                  </View>
                  <View style={styles.items}>
                    <Text style={styles.icont}>{k.icon2}</Text>
                    <Text style={styles.font}>{k.iconText2}</Text>
                  </View>
                  <View style={styles.items}>
                    <Text style={styles.icont}>{k.icon3}</Text>
                    <Text style={styles.font}>{k.iconText3}</Text>
                  </View>
                  <View style={styles.items}>
                    <Text style={styles.icont}>{k.icon4}</Text>
                    <Text style={styles.font}>{k.iconText4}</Text>
                  </View>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#fff',
  },
  container: {
    ...BaseStyle.flex,
    marginBottom: 40,
  },
  row: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentBetween,
    ...BaseStyle.paddingHorizontal,
    marginTop: 20,
  },
  items: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
  },
  icont: {
    fontFamily: 'iconfont',
    fontSize: 30,
  },
  font: {
    fontSize: 14,
  },
});