React Native 布局

  render() {
    return (
      
        
          {15.0} 
          % 
          预期年化 
           年账户1年
           封闭期1 年
        
      

    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "#ffffff",
    height:106,
  },
  rate: {
    color: "#f53a31",
    fontSize: 28,
    marginLeft: 20,
    marginTop: 30,
    textAlign: "center",
  },
  percent:{
   marginLeft:1,
   marginTop:43,
   color:"#f53a31",
   textAlign:"center",
   fontSize:15,
  },
  rateDesc: {
    color: "#999999",
    fontSize: 10,
    marginTop: 63,
    marginLeft: 20,
    textAlign: 'center',
  },
  title: {
    color: "#999999",
    fontSize: 12,
    marginLeft: 55,
    marginTop: 35,
    textAlign: 'center',
  },
  expireTime: {
    color: "#000",
    fontSize: 12,
    textAlign: 'center',
    marginLeft: 55,
    marginTop: 4,
  },
  icon: {
    width: 16,
    height: 11,
    marginTop: 38,
    marginLeft: 11,
  },
  btn: {
    backgroundColor: '#f53a31',

  }
});

最后的输出结果出乎意料哦哦，所有元素横向排列，与我们预期的ios 相对布局效果不同。
所以元素都应该分组，横向的相邻为一组，竖向排列的为一组。

justifyContent ,alignItems, flexDirection 都是用来在容器中设置，约束子元素的布局，而不是设置在子元素中

-           大家都在投 
-          123,453人次 

// 修改后
+           大家都在投 
+          123,453人次 

设置text的位置排列是 textAlign, 不是alignItems.
另外Text 是特殊的元素，一般布局都是嵌套在View中。