efunbox-mobile-8/pages/components/Order.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

export default class Order extends Component {
  render() {
    return (
      <View style={[ styles.courseList, {left: this.props.left}]}>
        <View style={[styles.btn, { backgroundColor: '#F5CA0D'}]}>
          <Text style={{color: '#fff', fontSize: 18}}>立即购买</Text>
        </View>  
        <View style={[styles.btn, { backgroundColor: '#F5880D'}]}>
          <Text style={{color: '#fff', fontSize: 18}}>一元秒杀</Text>
        </View> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  courseList: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: 57,
    backgroundColor: '#fff',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: 20,
    paddingRight: 20,
    borderStyle: 'solid',
    borderTopWidth: 1,
    borderColor: '#000000'
  },
  btn: {
    width: '45%',
    height: 35,
    borderRadius: 35,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  }
});