React Native:row-flexDir 中的文本在 iOS 上不显示(Android 工作)

Question

>我正在开发一个应用程序，并遇到以下问题：我需要文本和可触摸不透明度或输入元素在同一行上。

以下代码在 Android 上生成我想要的内容：文本和彼此相邻的圆形星形图标。

但是，在 iOS 上，永远不会显示文本，只会显示图标。尽管如此，空间还是留给了文本，所以它似乎在那里，但看不见。

<View style={styles.horizontalContainer}>
  <Text style={styles.textStyle}>Text</Text>
  <TouchableOpacity style={styles.opacityStyle} onPress={() => this.onPress()}>
    <Icon name="star" size={20} color="white" />
  </TouchableOpacity>
</View>
const styles = StyleSheet.create({
  horizontalContainer: {
    flexDirection: 'row',
    flex: 1,
    height: 40,
    width: '100%',
    padding: 28,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  textStyle: {
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 20,
    fontWeight: '400',
    color: '#ffffff',
  },
  opacityStyle: {
    elevation: 5,
    padding: 0,
    margin: 0,
    width: 50,
    height: 50,
    backgroundColor:  'transparent',
    alignItems: 'center',
    alignSelf: 'center',
    justifyContent: 'center',
    borderRadius: 40,
    borderWidth: 1,
    borderColor: '#fff',
  },
});

Answer 1

' textAlignVertical' 是一个仅适用于 Android 的功能。

Platform.OS === 'ios' ? 'none': 'center'