React Native 布局

  render() {
    return (
      <TouchableHighlight onPress={this._onPress} style={{ flex: 1, flexDirection: "row" }}>
        <View style={styles.container}>
          <Text style={styles.rate}>{15.0} </Text>
          <Text style = {styles.percent}>% </Text>
          <Text style={styles.rateDesc}>预期年化 </Text>
          <Text style = {styles.title} > 年账户1年</Text>
          <Text style = {styles.expireTime}> 封闭期1 年</Text>
        </View>
      </TouchableHighlight>

    );
  }

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 都是用来在容器中设置，约束子元素的布局，而不是设置在子元素中

-          <Text style={{ flex: 1, marginLeft: 20, fontSize: 12, alignItems: "center" }}> 大家都在投 </Text>
-          <Text style={{ flex: 1, justifyContent: 'flex-end', fontSize: 12, alignItems: "center" }}>123,453人次 </Text>

// 修改后
+          <Text style={{ flex: 1, marginLeft: 20, fontSize: 12,backgroundColor:"red"}}> 大家都在投 </Text>
+          <Text style={{ flex: 1, fontSize: 12,marginRight:10, backgroundColor:"brown",textAlign:"right"}}>123,453人次 </Text>

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