Реагировать на собственную сетку с шириной, определяемой содержимым текста - PullRequest
Новая
       49

Реагировать на собственную сетку с шириной, определяемой содержимым текста

0 голосов
/ 22 апреля 2020

Честно говоря, я новичок в разработке Front-end, и это, вероятно, легко исправить. Я пытаюсь достичь чего-то очень похожего на каменную решетку. Я хочу, чтобы ящики с текстом можно было горизонтально прокручивать, а ширина ящиков определялась длиной текста.

Текущий результат из кода

Что я хочу

Как выглядит код:

Родитель: 

    scrollContainer:{
        marginTop: 100,
        marginLeft: 36, 
        height: 237,
    },
    container:{
        flexWrap: 'wrap',
    },

<ScrollView
   style={styles.scrollContainer}
   horizontal={true}>
     <View style={styles.container}>
        <ReflectionBox text={'Lærerikt'}/>
        <ReflectionBox text={'Ble bedre kjent'}/>
        <ReflectionBox text={'Bortkastet'}/>
        <ReflectionBox text={'Frister til gjentakelse'}/>
        <ReflectionBox text={'Komfortabelt'}/>
        <ReflectionBox text={'Kjedelig'}/>
        <ReflectionBox text={'Hyggelig'}/>
        <ReflectionBox text={'Gøy'}/>   
     </View>
</ScrollView>

Ребенок: 

container: {
    height: 45,
    borderColor: '#2A47FD',
    borderStyle: 'solid',
    borderWidth: 1,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10,
    marginRight: 10, 
},
text:{
    fontFamily: 'EuclidCircularB-Medium',
    color: 'black',
    fontSize: 15,
    paddingLeft: 36,
    paddingRight: 36,
}

<TouchableOpacity 
  style={[styles.container, + activeBox ? {backgroundColor: '#2A47FD'} : '']} 
  onPress={() => setActiveBox(!activeBox)}>
      <Text style={[styles.text, + activeBox ? {color: 'white'} : '']}>{props.text}</Text>
</TouchableOpacity>
...