React Native: текст внутри row-flexDir не отображается на iOS (работает Android) - PullRequest
0 голосов
/ 18 апреля 2019

Я работаю над приложением, и у меня возникает следующая проблема: мне нужен текст и либо TouchableOpacity, либо элемент ввода в той же строке.

Следующий код создает то, что я хочу в 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',
  },
});

1 Ответ

0 голосов
/ 18 апреля 2019

'textAlignVertical' - это функция, которая работает только на Android.

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