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

【问题标题】：How can I vertically align an icon in an expo react-native List.Item?如何在 expo react-native List.Item 中垂直对齐图标？
【发布时间】：2020-05-17 17:00:33
【问题描述】：

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

我有以下代码：

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

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

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

【问题讨论】：

标签： react-native expo react-native-paper

【解决方案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',
  }}
/>

【讨论】：

【解决方案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
    }}
     />
  );

【讨论】：