垂直对齐底部答案

【问题标题】：Align vertically to bottom垂直对齐底部
【发布时间】：2021-11-03 06:45:54
【问题描述】：

我创建了一张包含一些文字和图标的卡片。我想将该图标对齐到底部。这是我的代码：

export default function App() {
  return (
    <View
      style={{
        borderWidth: 1,
        borderColor: 'red',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 10,
        paddingHorizontal: 15,
      }}>
      <View style={{ flex: 1 }}>
        <View style={{ flexDirection: 'row' }}>
          ...
      </View>
      <View
        style={{
          marginLeft: 10,
          height: '100%',
          // justifyContent: 'flex-end',
          // alignContent: 'flex-end',
        }}>
        <View
          style={{
            justifyContent: 'center',
            alignItems: 'center',
            alignSelf: 'center',
            alignContent: 'center',
          }}>
          <MyIcon color="gray" />
        </View>
      </View>
    </View>
  );
}

function MyIcon({ color }) {
  return (
    <View
      style={{
        borderRadius: 15,
        width: 30,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'lightblue',
      }}>
      <Svg ...>
        ...
      </Svg>
    </View>
  );
}

工作零食是here。

包含图标的圆圈应该在底部，我不需要absolute，因为我认为。我尝试flex-end，但似乎不起作用。

原样：

我想要的（青色圆圈是图标）：

【问题讨论】：

尝试删除评论第 55 行 justifyContent: 'flex-end'，它会起作用。

标签： css react-native vertical-alignment

【解决方案1】：

import * as React from 'react';
import { Text, View } from 'react-native';
import Svg, { Path } from 'react-native-svg';

export default function App() {
  return (
    <View
      style={{
        borderWidth: 1,
        borderColor: 'red',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 10,
        paddingHorizontal: 15,
      }}>
      <View style={{ flex: 1 }}>
        <View style={{ flexDirection: 'row' }}>
          <Text
            numberOfLines={1}
            style={{
              fontSize: 12,
              color: 'black',
              fontWeight: '600',
              paddingRight: 5,
            }}>
            Park
          </Text>
          <Text
            numberOfLines={1}
            style={{ fontSize: 12, color: 'black', fontWeight: '400' }}>
            {`- Something`}
          </Text>
        </View>
        <Text
          numberOfLines={1}
          style={{
            fontSize: 16,
            color: 'black',
            fontWeight: '600',
            paddingVertical: 3,
          }}>
          A place
        </Text>
        <Text
          numberOfLines={1}
          style={{ fontSize: 12, color: 'gray', fontWeight: '400' }}>
          10:00 - 17:00
        </Text>
      </View>
     
         <View
          style={{
            justifyContent: 'center',
            alignItems: 'center',
            alignSelf: 'flex-end',
          }}>
          <MyIcon color="gray" />
        </View>
    </View>
  );
}

function MyIcon({ color }) {
  return (
    <View
      style={{
        borderRadius: 15,
        width: 30,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'lightblue',
        
      }}>
      <Svg
        width="16"
        height="17"
        viewBox="0 0 16 17"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <Path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M11.7489 3.91654C11.0386 3.37708 10.8414 2.41269 11.2425 1.64836L9.86861 0.604841C9.4288 0.270796 8.80147 0.356536 8.46742 0.796346L6.29 3.66319L6.78186 4.03677L7.1004 4.27871L6.61652 4.91578L6.29799 4.67385L5.80612 4.30027L0.604492 11.1488C0.270448 11.5887 0.356187 12.216 0.795997 12.55L2.15874 13.5851C2.78224 12.9278 3.81383 12.8315 4.55197 13.3921C5.29012 13.9528 5.47419 14.9724 5.0083 15.7494L6.37042 16.7839C6.81023 17.118 7.43756 17.0322 7.77161 16.5924L12.9732 9.74384L12.4814 9.37026L12.1628 9.12832L12.6467 8.49125L12.9653 8.73318L13.4571 9.10676L15.6345 6.23991C15.9686 5.80011 15.8828 5.17277 15.443 4.83873L14.0697 3.79568C13.4411 4.38723 12.4591 4.45599 11.7489 3.91654ZM8.18717 5.10414L7.86864 4.8622L7.38476 5.49928L7.7033 5.74121L8.68702 6.48837L9.00556 6.73031L9.48944 6.09323L9.1709 5.85129L8.18717 5.10414ZM10.5762 6.91866L10.2577 6.67672L9.7738 7.3138L10.0923 7.55574L11.0761 8.30289L11.3946 8.54483L11.8785 7.90775L11.5599 7.66582L10.5762 6.91866Z"
          fill={color}
        />
      </Svg>
    </View>
  );
}

这是您可以查看的snack

【讨论】：

高度不固定，不能简单使用top: 10

【解决方案2】：

而不是

alignContent: 'flex-end'

你应该使用

alignItems: 'flex-end'

【讨论】：

我试过了，还是不行，你能举个例子吗？或者你能编辑我的代码吗？
这里是工作示例codesandbox.io/s/hungry-cray-t149n 像 49 一样检查。我添加了 margin-top 并将其设置为 auto 到子元素，这将使图标与底部对齐。