ReactNative创建样式

代码A

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
 
 
class App extends React.Component {
  render() {
    return (<View style={styles.container}>
       <Text style={styles.title}>Hello World,Welcome to ReacNative</Text>
    </View>)
  }
}


let styles = StyleSheet.create({
  title:{
    fontFamily:'Helvetica Neue',
    fontSize:26,
    color:'#6435c9',
    textAlign:"center",
    fontStyle:'italic',
    letterSpacing:2,
    lineHeight:33,
    textDecorationStyle:'double',
    textDecorationLine:'underline'
  },
  container:{
    backgroundColor:'#eae7ff',
    flex:1,
    margin:30,
    borderWidth:1,
    borderColor:'#6435c9',
    borderRadius:16,
    shadowColor:'#6435c9',
    shadowOpacity:0.6,
    shadowRadius:2,
    shadowOffset: {
      width:1,
      height:0
    }
   




  }
});
export default App;

 二

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


class App extends React.Component {
  render() {
    return (<View style={styles.container}>
      <View style={styles.item, styles.itemOne}><Text style={styles.itemText}>1</Text></View>
      <View style={styles.item, styles.itemTwo}><Text style={styles.itemText}>2</Text></View>
      <View style={styles.item, styles.itemThreee}><Text style={styles.itemText}>3</Text></View>
    </View>)
  }
}

let styles = StyleSheet.create({
  item: {
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#6435c9',
    margin: 6,
    flex:1

  },
  itemOne: {},
  itemTwo: {
    alignSelf:'center'
  },
  itemThreee: {
    alignSelf:'center'
  },
  itemText: {
    fontSize: 33,
    fontWeight: '200',
    padding: 30,
    textAlign:'center',
    color:'#6435c9'
 
  },
  container: {
    backgroundColor: '#eae7ff',
    flex: 1,
    paddingTop:23,
    justifyContent:'center',
    alignItems:'flex-start',
    flexDirection:'row'
  }
});
export default App;