响应本机对齐项：基线不起作用

Question

我需要将2个svg图标和一个带有一些文本的视图对齐到基线，但是正如您从快照中看到的那样，它不起作用。

这是我想要的结果：

这是代码：

<View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.openDrawer()} style={{marginRight: 20}}>
          <MenuIcon />
        </TouchableOpacity>
        <View>
          <Text style={styles.date}>24 ottobre 2019</Text>
          <Text style={styles.title}>Compiti</Text>
        </View>
        <TouchableOpacity onPress={() => navigation.navigate({routeName: 'Calendary'})} style={{position: 'absolute', right:0}}>
          <CalendarIcon width={50} height={50} />
        </TouchableOpacity>
    </View>

这是样式

const styles = StyleSheet.create({
  header: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'baseline',
  },
  date: {
    color: '#C8C8C8',
    fontSize: 15
  },
  title: {
    fontSize: 40,
    fontWeight: '400',
    color: '#454545',
  },
});

Answer 1

您的header样式应如下：

header: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center', // add center instead of flex-end
}