如何在 expo react-native List.Item 中垂直对齐图标？

Question

我正在使用 react-native-paper 的 List.Item 组件。

我有以下代码：

                <List.Item
                    title={<FirstNameInput />}
                    right={props => <List.Icon {...props} icon="pencil" />}

                    style={{ backgroundColor: customTheme.colors.background, justifyContent: 'center' }}
                />

但图标停留在顶部。无论 title 的高度如何，如何使其保持垂直对齐？

Answer 1

您可以使用 flex:

对齐 List.Item

<List.Item
  title={<FirstNameInput />}
  right={props => <List.Icon {...props} icon="pencil" />}
  style={{
    backgroundColor: customTheme.colors.background,
    justifyContent: 'center',
    alignSelf: 'center',
    alignItems:'center',
  }}
/>

Answer 2

使 List.Icon 垂直居中的唯一方法是以 List.Icon 样式传递 marginVertical。

你必须通过 marginVertical:hight/2-offset

您需要设置偏移量，因为标题正在使用 marginVertical:6 referance

因为标题，左右样式由<View style={styles.row}>控制reference

 const ListItemHeight=300;
  const offset=12;
  return (
    <List.Item
    title={"ABC"}
    right={props => <List.Icon {...props} style={{marginVertical:ListItemHeight/2-offset}} icon="pencil" />}
    style={{
      backgroundColor: "red",
      width:"100%",
      height:ListItemHeight
    }}
     />
  );

如何在 expo react-native List.Item 中垂直对齐图标？

How can I vertically align an icon in an expo react-native List.Item?

react-native

expo

react-native-paper