React native 在react native中的文本描述之间添加复选框

我有一个视图，其中显示了从服务器获取的标题和详细信息，如下所示

现在，在问题描述中有一个标记

\uuuu CB\uuuu

，我需要用复选框替换它，因此，将有一个复选框代替该标记，其余文本将照常继续。我已经根据标记分隔了文本，并在它们之间放置了一个复选框，但是我无法对齐视图，要么它是按列排列的，要么如果我尝试按行排列，文本将无法继续。这是我试过的

尝试1：

{问题文本1}
{问题文本2}
风格
checkBoxTextContainer：{
弹性：1，
flexDirection：“行”
},
复选框样式：{
宽度：20，
身高：20
}

结果:

尝试2：

{问题文本1}
{问题文本2}

结果:

---

我需要复选框在文本之间继续，就像原始图像中的标记一样。感谢您的帮助。

尝试将文本和复选框包装到

标记中。 请尝试下面的解决方案。这可能对你有帮助

        <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>

//换行为文本标记
//在第一个文本后添加空格
{questionText1+“”}
//在第二个文本前添加空格
{“+问题文本2}

下面是您的场景的示例工作代码

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>
        )
    }
}

import React，{Component}来自“React”
从“react native”导入{视图、文本、样式表}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'行'，
flexWrap:“wrap”
},
cb:{
宽度：10，
身高：10，
边界宽度：2，
边界半径：2，
边框颜色：“红色”，
玛金托普：4，
marginHorizontal:3，
}
})
const sampleData=[“Lorem”、“ipsum”、“dolor”、“sit”、“amet”，
“CB”，
“康塞特图”、“阿迪皮斯廷”、“精英”、“库拉比图”，
“CB”，
‘nunc’、‘vel’、‘scelerisque’、‘tempus’、‘CB’、‘Morbi’、‘luc’、‘abcd’、‘xyzw’
]
常量复选框=（）=>(
)
导出默认类CheckText扩展组件{
renderData=（数据）=>{
常量视图=data.map（（项）=>{
if（item=='CB'）{return}
返回（{item}）
})
返回视图
}
render（）{
返回(
{this.renderData（sampleData）}
)
}
}

这是输出的快照

注意：

---

我已将文本解析为字符串数组。这是这里的关键逻辑。您决定标记输入文本的方式将影响组件的呈现。当我尝试使用长字符串作为标记时，

flexWrap:'wrap'

无法正常工作。有关更多详细信息，请参见此。将标记化为单个单词可以完成此任务。

这会出现一个错误，表示当前不支持嵌套内部。我使用的是react原生版本0.57.8，我已经在iOS和react原生版本0.55.3中进行了测试。我认为嵌套视图只支持iOS。让我看看另一个解决方案

        <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>

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>
        )
    }
}