Question

我正在开发一个应用程序，但遇到以下问题：我需要在同一行上输入Text和TouchableOpacity或Input-Element。

下面的代码产生了我在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'

React Native：row-flexDir内的文本在iOS上不显示（Android可以）

1 个答案: