如何伸缩空间之间2个元素在React本地纸卡片.行动

slsn1g29 于 2022-12-19 发布在 React

关注(0)|答案(1)|浏览(99)

使用：https://callstack.github.io/react-native-paper/card-actions.html
我如何定位2个按钮之间的弹性空间？我正在尝试的任何东西都不起作用。

<Card.Actions
    style={{
      display: 'flex',
      justifyContent: 'space-between',
      flexDirection: 'row',
    }}>
    <Text>Lead booker:{'\n'}Benn King</Text>
    <AppButton label="View Booking" width="50%" size="small" />
  </Card.Actions>

尝试修复此处：https://snack.expo.dev/?name=Card.Actions&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Fcard-actions.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20Card%2C%20Button%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20(%0A%20%20%3CCard%3E%0A%20%20%20%20%3CCard.Actions%3E%0A%20%20%20%20%20%20%3CButton%3ECancel%3C%2FButton%3E%0A%20%20%20%20%20%20%3CButton%3EOk%3C%2FButton%3E%0A%20%20%20%20%3C%2FCard.Actions%3E%0A%20%20%3C%2FCard%3E%0A)%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper%405.0.0,@expo/vector-icons%40%5E13.0.0,react-native-safe-area-context

react-native

来源：https://stackoverflow.com/questions/74827488/how-to-flex-space-between-2-elements-in-react-native-paper-card-actions

1条答案

按热度按时间

zwghvu4y1#

看起来不错。我不熟悉这些react-native-paper组件。但是css样式属性和嵌套看起来不错。
我怀疑的是，react-native-paper组件没有像您期望的那样对待style prop ，可能会覆盖或强制执行一些覆盖您的样式。
因此，为了给予你恢复一点理智，建议你尝试一下space-between flex布局，只使用普通的react-native组件View和Text。可能在最外面的容器上也需要width: '100%'。

<View style={{width:'100%', display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
  <View>
    <Text>Left</Text>
  </View>
  <View>
    <Text>Right</Text>
  </View>
</View>

下面是使用snack.expo.dev-https://snack.expo.dev/w1ATX401_的示例
基本上不要使用Card.Actions，因为它似乎覆盖了你设置的justifyContent样式。你可以把它看作是一个“bug”或者是库的一个特性。

赞(0）回复(0）举报 2022-12-19

我来回答

如何伸缩空间之间2个元素在React本地纸卡片.行动

1条答案

相关问题

热门标签

最新问答