React native - 3 个组件在同一行而不是垂直堆叠

Question

我正在练习 React Native：在这个列表中，为我的数据库返回的每个条目都由 3 个项目组成：

现在我希望我的屏幕看起来像这样：

我的代码是：

  <ListItem bottomDivider>
    <ListItem.Content style={{textAlign:'left'}}>
      <ListItem.Title>{item.title}</ListItem.Title>
      <ListItem.Subtitle
        style={{color: '#9D7463'}}>
        <Image
          style={{ alignSelf: "center", borderRadius: 50 }}
          source={{ uri: item.probability, width: 48, height: 48 }}
        />
      </ListItem.Subtitle>
      <ListItem.Subtitle
        style={{color: '#000', textTransform: 'uppercase'}}>
        {item.country_id}
      </ListItem.Subtitle>
      <Button
        buttonStyle={{backgroundColor: primaryColor, padding: 9, textAlign: "right"}}
        title="Follow"
        onPress={() => alert(item.id_user)}
      />
    </ListItem.Content>
  </ListItem>

Answer 1

在这个组件中你可以使用 flexbox

<ListItem.Content style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>

Answer 2

您需要将 flexDirection 更改为 row。请注意 this is different from the web:

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row

因此，将 flexDirection 更改为父视图的行，并为每个子视图设置 flex:1，应该可以解决问题。

<ListItem.Content style={{flexDirection: "row"}}>
<ListItem.Subtitle
        style={{color: '#9D7463', flex: 1}}>
        <Image
          style={{ alignSelf: "center", borderRadius: 50 }}
          source={{ uri: item.probability, width: 48, height: 48 }}
        />
      </ListItem.Subtitle>
      <ListItem.Subtitle
        style={{color: '#000', textTransform: 'uppercase', flex: 1}}>
        {item.country_id}
      </ListItem.Subtitle>
      <Button
        buttonStyle={{backgroundColor: primaryColor, padding: 9, textAlign: "right", flex: 1}}
        title="Follow"
        onPress={() => alert(item.id_user)}
      />
</ListItem.Content>

React native - 3 个组件在同一行而不是垂直堆叠

React native - 3 components on the same row instead of vertically stacked

javascript

react-native

mobile-application