ReactNative-UI经验

一、横放左右两个text控件，右边的text随文字大小，左边的text自动占满剩下的空间。多用于tableView cell的title与detail。

{props.title}
{props.detail}

使用flexGrow，让左边的text自动占满剩下的空间。

二、底部有一个按钮，距离底部距离固定

先使用flexGrow: 1，让包含Button的View自动占满剩余的空间，然后通过 justifyContent: 'flex-end'，让button右主轴方向底部开始对齐。

三、tableView的cell圆角处理，多个cell只有第一个顶部和最后一个cell底部是圆角

cell：

        ...

//定义个顶部圆角和底部圆角样式
const styles = StyleSheet.create({
    tableViewTopRadius: {
        borderTopStartRadius: 10,
        borderTopEndRadius: 10
    },
    tableViewBomRadius: {
        borderBottomStartRadius: 10,
        borderBottomEndRadius: 10,
    },
});