/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';

const styles = {
  box: {
    marginBottom: 10,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fefefe',
  },
};

const App = class NukeDemoIndex extends Component {
  render() {
    return (
      <View>
        <Text>高清与边框覆盖问题</Text>
        <View
          style={[
            styles.box,
            { borderTopWidth: 8, borderWidth: 1, borderColor: '#3089dc' },
          ]}
        >
          <Text>borderTopWidth 优先级 > borderWidth</Text>
        </View>
        <View
          style={[
            styles.box,
            {
              borderWidth: 1,
              borderTopColor: '#ff6600',
              borderColor: '#3089dc',
            },
          ]}
        >
          <Text>borderTopColor 优先级 > borderColor</Text>
        </View>
      </View>
    );
  }
};

render(<App />);