垂直对齐底部

Question

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

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 但似乎不起作用。

原样：

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

Answer 1

而不是

alignContent: 'flex-end'

你应该使用

alignItems: 'flex-end'

Answer 2

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你可以检查

垂直对齐底部

Align vertically to bottom

css

react-native

vertical-alignment