Добавление флажка между текстовым описанием в реагировать родной

Question

У меня есть вид, где я отображаю заголовок и детали, которые я получаю с сервера, как показано ниже.

Теперь в описании вопроса есть тег __CB__, который мне нужно заменить на флажок, поэтому вместо этого тега будет флажок, а остальная часть текста будет продолжаться как обычно. Я разделил текст на основе тега и установил флажок между ними, но я не смог выровнять представление, либо оно расположено по столбцам, либо, если я попытаюсь расположить строки, текст не будет продолжен. Вот что я попробовал.

Попробуйте 1:

<ScrollView
            style={styles.scrollStyle}
            scrollEnabled={scrollEnabled}
            onContentSizeChange={this.onContentSizeChange}
          >
            <View style={styles.checkBoxTextContainer}>
              <Text style={styles.questionText}>{questionText1}</Text>
              <CheckBox
                style={styles.checkboxStyle}
                onClick={this.checkboxClick}
                isChecked={this.state.isChecked}
                checkedImage={<Image source={Images.checkBoxTick} />}
                unCheckedImage={<Image source={Images.checkBoxEmpty} />}
                // leftText={questionText1}
                // rightText={questionText2}
              />

               <Text style={styles.questionText}>{questionText2}</Text>
            </View>
          </ScrollView>
Styles
checkBoxTextContainer: {
    flex: 1,
    flexDirection: "row"
  },
  checkBoxStyle: {
    width: 20,
    height: 20
  }

Результат:

Попробуйте 2:

<ScrollView
                style={styles.scrollStyle}
                scrollEnabled={scrollEnabled}
                onContentSizeChange={this.onContentSizeChange}
              >
                  <Text style={styles.questionText}>{questionText1}</Text>
                  <CheckBox
                    style={styles.checkboxStyle}
                    onClick={this.checkboxClick}
                    isChecked={this.state.isChecked}
                    checkedImage={<Image source={Images.checkBoxTick} />}
                    unCheckedImage={<Image source={Images.checkBoxEmpty} />}
                    // leftText={questionText1}
                    // rightText={questionText2}
                  />

                   <Text style={styles.questionText}>{questionText2}</Text>
              </ScrollView>

Результат:

Мне нужно, чтобы флажок продолжался между текстом, как тег на моем исходном изображении. Любая помощь приветствуется.

Answer 1

Ниже приведен пример рабочего кода для вашего сценария.

import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    cb: {
        width: 10,
        height: 10,
        borderWidth: 2,
        borderRadius: 2,
        borderColor: 'red',
        marginTop: 4,
        marginHorizontal: 3,
    }
})

const sampleData = [ 'Lorem', 'ipsum', 'dolor', 'sit', 'amet',
'CB', 
'consectetur', 'adipiscing', 'elit.',  'Curabitur',
'CB',
' nunc', 'vel', 'scelerisque', 'tempus.', 'CB', 'Morbi', 'luc', 'abcd', 'xyzw'
]

const CheckBox = () => (
    <View style={styles.cb} />
)

export default class CheckText extends Component {
    renderData = (data) => {
        const views = data.map((item) => {
            if (item === 'CB') { return <CheckBox />}
            return (<Text>{item}</Text>)
        })
        return views
    }

    render() {
        return (
            <View style={styles.container}>
                {this.renderData(sampleData)}
            </View>
        )
    }
}

И это снимок вывода

Примечание

Я проанализировал текст в массив строк. Это ключевая логика здесь. То, как вы решите токенизировать введенный текст, повлияет на визуализацию вашего компонента. Когда я пробовал длинные строки как токен, flexWrap: 'wrap' не работал должным образом. См. Этот выпуск для более подробной информации. Работа по токенам в отдельные слова может сделать работу.

Answer 2

попробуйте заключить текст и флажок в тег <Text>. Пожалуйста, попробуйте решение ниже. Это может помочь вам.

        <ScrollView
            style={styles.scrollStyle}
            scrollEnabled={scrollEnabled}
            onContentSizeChange={this.onContentSizeChange}
          >
            <View style={{
                 width:'100%',
                 flexDirection: "row"
            }}>
              // wrap into text tag
              <Text>
              // add space after first text
              <Text style={styles.questionText}>{questionText1+" "}</Text>
              <CheckBox
                style={styles.checkboxStyle}
                onClick={this.checkboxClick}
                isChecked={this.state.isChecked}
                checkedImage={<Image source={Images.checkBoxTick} />}
                unCheckedImage={<Image source={Images.checkBoxEmpty} />}
              />
               // add space before second text
               <Text style={styles.questionText}>{" "+questionText2}</Text>
              </Text>
            </View>
          </ScrollView>