react-native - 如何垂直对齐 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

List.Item您可以使用 flex对齐：

<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参考

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

 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
    }}
     />
  );