React Native如何将卡片视图按3:2比例拆分为上下两个部分？

核心实现逻辑：React Native 默认采用垂直方向的flex布局，父容器下的子元素flex值会按比例分配垂直方向可用空间，只需给上下子容器分别设置flex: 3和flex: 2即可实现3:2的比例拆分。
你原有代码存在属性冲突问题：同时设置了height: 100和padding: 100会导致内部空间被内边距完全占满，justifyContent: "center"也会影响子元素的flex空间分配，需要对应修改。

完整修改后可用代码如下：

import React from "react";
import {
  Button,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TouchableOpacity,
} from "react-native";

export default function App() {
return(
      <View style={styles.card}>
        {/* 上方占3份的区域，直接在这里添加你需要的上方内容即可 */}
        <View style={styles.results}>
          <Text style={styles.texty}>numbers</Text>
        </View>
        {/* 下方占2份的区域，直接在这里添加你需要的下方内容即可 */}
        <View style={styles.calculations}>
          <Text>numbers</Text>
        </View>
      </View>
      );
};
const styles = StyleSheet.create({
card: {
  width: "80%",
  shadowColor: "black",
  shadowOffset: { width: 0, height: 2 },
  shadowRadius: 6,
  shadowOpacity: 0.26,
  elevation: 5, 
  backgroundColor: "white",
  borderRadius: 15,
  marginTop: 80,
  marginHorizontal: 42,
  flexDirection: "column",
  // 如果需要卡片固定高度，把下面flex:1替换成固定高度值即可，比如height: 350，不影响上下比例分配
  flex: 1
},
texty: {
  fontSize: 30,
},
results: {
  flex: 3,
  padding: 16,
  justifyContent: "center",
  alignItems: "flex-end",
  borderBottomWidth: 0.3,
  borderBottomColor: "grey",
},
calculations: {
  flex: 2,
  padding: 16,
  justifyContent: "center",
  alignItems: "flex-end",
  fontSize: 34,
}
});

内容的提问来源于stack exchange，提问作者user10078002