虽然在android手机上使用React本机时Flex-1不起作用

Question

我的代码：-

    <View className="flex-row items-center space-x-2 pb-2 mx-4">
      <View className="flex-row space-x-2 bg-gray-200 p-3 flex-1">
        <SearchIcon color="gray" size={20} />
        <TextInput
          placeholder="Restaurants and Cusines"
          keyboardType="default"
        />
      </View>

      <AdjustmentsIcon color="#00CCBB" />
    </View>

另外，我使用的是顺风-css，但我也用普通的定标检查它，它不起作用：

Answer 1

React本机造型系统不同于传统的css。元素使用style支柱，它需要一个对象或一个对象数组(查看样式链接)。如果您必须使用顺风，您会想要找到某种方法将css样式转换为react本机样式系统，或者找到顺风的端口以响应本机。

Answer 2

要使flex-1工作，关系应该是siblings而不是parent-child.，兄弟姐妹的父显示应该是灵活的。

Parent   // display flex
 - child // display flex-none or flex-1 or flex-auto
 - child // display flex-none or flex-1 or flex-auto

在您当前的代码层次结构中，view位于另一个view中。

- View
  - View

要想让事情奏效，试着：

- View 
- View

并将两个views的父显示属性设置为显示flex。

Answer 3

如果您想在React中使用TailwindCSS，可以改用尾风-反应-原生