react-native学习总结

react-native学习总结

使用的JSX语法在开发手机本地应用的时候，极大的提高了开发效率，基本思想还是跟web开发相同，但是个作为一个C++程序员，来接触react-native一段时间发现了很多让人心动的东西，比如在javascript当中包含这XML，使用和web开发不一样的css语法。但是学习web开发还是react-native，熟记一些css属性还是比较重要的。

笔记：

title:{
  fontSize:26,
  color:'#6435c9',//字体颜色
  textAlign:'center',
  fontStyle:'italic',//设置字体风格：斜体
  letterSpacing:2,//设置字间距
  lineHeight:33,//设置行高
  fontFamily:'Helvetica Neue',//设置字体
  fontWeight:'300',
  textDecorationLine:'underline',//设置文字下划线
  textDecorationStyle:'dashed'//设置下划线为虚线
}

运用这个样式的文字显示效果：

布局：react-native可以在javascript结构中嵌入xml语法，用树形结构的方法来创建布局方式，我们看到的一个屏幕显示版面就是一个View组件，这个View组件作为整个屏幕布局的组件。

class HelloWorld 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.itemThree]}>          <Text style={styles.itemText}>3</Text>        </View>      </View>
        <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.itemThree]}>
          <Text style={styles.itemText}>3</Text>
        </View>
      </View>
    );
  }
}

css布局样式

var styles = StyleSheet.create({
  item:{
    backgroundColor:'#ffffff',
    borderWidth:1,
    borderColor:'#6435c9',
    margin:6,
  },
  itemOne:{
    alignSelf:'flex-start',//左对齐
  },
  itemTwo:{
    alignSelf:'center',
  },
  itemThree:{

  },
  itemText:{
    fontSize:33,
    fontFamily:'Helvetica Neue',
    fontWeight:'200',
    color:'#6435c9',
    padding:30,
  },
container:{
  alignItems:'flex-end',
  backgroundColor:'#eae7ff',
  flex: 1,
  paddingTop:23,
}
});

显示效果：