Reactjs 具有Flex维度的视图内部按钮的文本被截断

我对本地和移动应用程序开发基本上是新手，我正在尝试为我的应用程序创建一个带有文本和按钮的标题

这是我的密码：

从“React”导入React；
从“react native”导入{样式表、文本、视图、按钮}；
导出默认类App扩展React.Component{
_页（）{
}
render（）{
返回(
雅斯泽
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:“列”
},
标题：{
弹性：1，
背景颜色：“#BDBDBD”，
flexDirection:'行'，
对齐项目：“居中”，
justifyContent:“间距”
},
正文：{
弹性：10，
背景颜色：“白色”
},
标题文字：{
//尺寸：30，
fontWeight:'粗体'，
背景颜色：“黄色”，
//对齐自我：“中心”，
弹性：1
},
离开按钮：{
//对齐自我：“中心”，
//宽度：“100”
弹性：2
}
});

因此，我将带有flexDirection的标题放在行中，并在视图中添加了带有flex:1和flex:2的文本和按钮元素，因此我希望得到以下结果：

但是我有这样一个选项：按钮内的文本被截断，我的按钮没有占用他应该占用的空间

我试着利用自己的属性和宽度，但似乎什么都不起作用

---

在facebook按钮示例中，我可以看到该按钮可以定义按钮的宽度，但我不知道如何使其工作。

您必须将

按钮

包装在flex ed

视图中才能实现



从

按钮组件渲染一个可触摸的按钮，并使用满按钮
其父容器的宽度