react-native：无法设置文本框的全宽

Question

我正在设计基于聊天平台的反应原生应用程序。我目前仍处于UI问题：

正如您所看到的，当我旋转移动屏幕时，文本框不会覆盖全宽空间。我是React-native的新手，我尝试了很多来解决这个问题。我还在flex: 1中使用textBox似乎有效并填满了屏幕的整个宽度，但它隐藏了麦克风图标并从屏幕截图中添加了文件图标（+） -1（即当移动设备处于垂直位置时）

以下是代码：

export default StyleSheet.create({
    textBox: {
        backgroundColor: '#fff',
        flex: 0,
        alignItems: 'center',
        borderTopWidth: 1,
        borderTopColor: '#D8D8D8',
        zIndex: 2
    },
    textArea: {
        flexDirection: 'row',
        alignItems: 'center',
        flexGrow: 0,
        backgroundColor: '#fff'
    },
    textBoxInput: {
        textAlignVertical: 'center',
        maxHeight: 120,
        flexGrow: 1,
        width: 1,
        // paddingVertical: 12, needs to be paddingTop/paddingBottom because of iOS/Android's TextInput differences on rendering
        paddingTop: 12,
        paddingBottom: 12,
        paddingLeft: 0,
        paddingRight: 0
    },

对于Android设备，代码似乎工作正常。如果有人可以帮我解决这个问题，那就太好了。 ：）

Answer 1

试试这个

import { Dimensions } from 'react-native';

然后这样做

let width = Dimensions.get('window').width

现在使用width变量作为像这样的元素的宽度css属性。

myElement: {
    width: width
}

或者

myElement: {
    width: Dimensions.get('window').width
}

请确保将此内容提供给最外面的元素以获得屏幕的整个宽度。

Answer 2

可能涉及很多问题，但在我的情况下，为了避免这个问题，将width设置为“100％”。我不知道它是否是最优的，但它对我有用。父容器也应具有该值，或者至少确保它们填满所有屏幕宽度