rn-project/src/pages/callUs.js

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

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  Linking,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

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

export default class CallUsScreen extends Component {
  static propTypes = {
    navigation: PropTypes.object,
  };
  constructor(props) {
    super(props);
    this.state = {
      checked: true,
      checked2: false,
    };
  }

  render() {
    const {
      navigation: { navigate },
    } = this.props;
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <ScrollView>
          <View style={styles.container}>
            <TouchableOpacity
              onPress={() => {
                Linking.openURL('http://m.cainiaolc.com');
              }}
              style={styles.titleView}>
              <Image
                style={styles.logoImage}
                source={{
                  uri: `https://upload-images.jianshu.io/upload_images/4731495-5ea4038ebc611894.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240`,
                }}
              />

              <Text style={styles.titleText}>菜鸟理财前端团</Text>
            </TouchableOpacity>
            <View style={styles.personDetailView}>
              <View style={[styles.listRow, styles.mt]}>
                <Text style={[styles.listText, styles.leftText]}>官网:</Text>
                <Text
                  onPress={() => {
                    Linking.openURL('http://m.cainiaolc.com');
                  }}
                  style={[styles.listText, styles.ml, styles.fontBg]}>
                  http://m.cainiaolc.com
                </Text>
              </View>
              <View style={[styles.listRow, styles.mt]}>
                <Text style={[styles.listText, styles.leftText]}>Author:</Text>
                <Text style={[styles.listText, styles.ml]}>JsLin</Text>
              </View>
              <View style={[styles.listRow, styles.mt]}>
                <Text style={[styles.listText, styles.leftText]}>Email:</Text>
                <Text
                  onPress={() => {
                    Linking.openURL('https://exmail.qq.com/login');
                  }}
                  selectable={true}
                  style={[styles.listText, styles.ml, styles.fontBg]}>
                  jiangsenlin@cainiaolc.com
                </Text>
              </View>
              <View style={[styles.listRow, styles.mt]}>
                <Text style={[styles.listText, styles.leftText]}>Blog:</Text>
                <Text
                  onPress={() => {
                    navigate('Web', { uri: 'https://jslinlink.gitee.io/blog' });
                  }}
                  selectable={true}
                  style={[styles.listText, styles.ml, styles.fontBg]}>
                  https://jslinlink.gitee.io/blog
                </Text>
              </View>
            </View>
          </View>
          <View style={styles.payView}>
            <Image
              style={styles.payImage}
              source={{
                uri:
                  'https://upload-images.jianshu.io/upload_images/4731495-62a1ee75362e2ebe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
              }}
            />
            <Text style={styles.payText}>
              &#xe640;
              <Text style={styles.blacFont}>打赏支持下</Text>
            </Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#fff',
  },
  container: {
    ...BaseStyle.flex,

    paddingTop: 20,
  },
  titleView: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
  },
  logoImage: {
    width: 30,
    height: 30,
    borderRadius: 15,
  },
  payImage: {
    width: 160,
    height: 160,
    borderRadius: 15,
  },
  titleText: {
    fontSize: 20,
    color: '#333',
  },
  personDetailView: {
    marginTop: 30,
    marginLeft: 30,
  },
  listRow: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
  },
  listText: {
    fontSize: 15,
    color: '#333',
  },
  payView: {
    // ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.justifyContentCenter,
    marginTop: 100,
  },
  payText: {
    fontSize: 14,
    fontFamily: 'iconfont',
    color: '#d81e06',
  },
  leftText: {
    width: 60,
    textAlign: 'right',
  },
  mt: {
    marginTop: 20,
  },
  ml: {
    marginLeft: 10,
  },
  fontBg: {
    color: '#0894ec',
  },
  blacFont: {
    color: '#333',
  },
});