Dingdong_app/decorator/loginContainer.js

import {inject, observer} from 'mobx-react';
import React from 'react';
import {StyleSheet, Text, View, StatusBar} from 'react-native';
import ConnectButton from '../components/ConnectButton';
import scrollPage from './scrollPage';

const labelElem = label => {
  return <Text style={styles.label}>{label}</Text>;
};

function loginContainer(Component) {
  @scrollPage
  @inject('i18nStore')
  @observer
  class NewPage extends React.Component {
    render() {
      const {i18nStore} = this.props;
      const {words} = i18nStore;
      return (
        <View style={styles.page}>
          <StatusBar backgroundColor="#fff" barStyle="light-content" />
          <View style={styles.center}>
          </View>
          <Text style={styles.title}>{words.welcom}</Text>
          <Component stylesInfo={styles} labelElem={labelElem} />
          <View style={styles.flexView} />
          <ConnectButton />
        </View>
      );
    }
  }
  return () => {
    return <NewPage />;
  };
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    paddingHorizontal: 8,
    paddingVertical: 20,
    backgroundColor: '#fff',
  },
  center: {
    alignSelf: 'center',
  },
  title: {
    alignSelf: 'center',
    marginTop: 35,
    fontSize: 16,
    color: '#000000',
    fontWeight: '400',
  },
  alignRight: {
    textAlign: 'right',
  },
  label: {
    width: 96,
    textAlign: 'right',
    fontSize: 16,
    color: '#000000',
    marginRight: 19,
    fontWeight: '400',
  },
  button: {
    width: 112,
  },
  input: {
    backgroundColor: '#F0F0F0',
    paddingHorizontal: 19,
    borderRadius: 3,
  },
  form: {
    marginTop: 24,
  },
  textButton: {
    color: '#FFC21C',
    fontSize: 12,
  },
  flexView: {
    flex: 1,
  },
});

export default loginContainer;