rn-project/src/pages/utilcomponet.js

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

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

import PropTypes from 'prop-types';
import { SafeAreaView } from 'react-navigation';
import Items from '../components/items';
import BaseStyle from '../constants/Style';

export default class Util extends Component {
  static PropTypes = {
    navigation: PropTypes.object,
  };

  // static defaultProps = {

  // };
  constructor(props) {
    super(props);
  }

  componentDidMount = () => {};

  componentWillUnMount = () => {};

  render() {
    const {
      navigation: { navigate },
    } = this.props;
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <View style={styles.container}>
          {/* list */}
          <Items
            LeftText={'列表组件'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('ListScreen');
            }}
          />
          <Items
            LeftText={'跑马灯'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('MarqueeScreen');
            }}
          />
          <Items
            LeftText={'安全键盘'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('PwdScreen');
            }}
          />
          <Text style={styles.textLeft}>第三方组件推荐:</Text>
          <Items
            LeftText={'时间选择器'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('Web', {
                uri:
                  'https://github.com/mmazzarolo/react-native-modal-datetime-picker',
                title: '时间选择器',
              });
            }}
          />
          <Items
            LeftText={'Pick选择器'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('Web', {
                uri: 'https://github.com/beefe/react-native-picker',
                title: '时间选择器',
              });
            }}
          />
          <Items
            LeftText={'更多组件'}
            RightIcon={'\ue615'}
            ItemsStyle={{ marginTop: 20 }}
            onPress={() => {
              navigate('Web', {
                uri:
                  'https://jslinlink.gitee.io/blog/2018/09/09/react-native-%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E4%BC%98%E8%B4%A8%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BB%84%E4%BB%B6/',
                title: '常用组件',
              });
            }}
          />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 20,
  },
  titleView: {
    ...BaseStyle.row,
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    marginBottom: 15,
  },
  icont: {
    fontFamily: 'iconfont',
    fontSize: 14,
  },
  textLeft: {
    fontSize: 14,
    color: '#333',
    marginLeft: 15,
    paddingTop: 15,
    paddingBottom: 15,
  },
});