在反应本机的文本描述之间添加复选框

Question

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

现在，在问题描述中有一个标签 __CB__，我需要将其替换为复选框，因此，将有一个复选框代替该标签，其余文本将照常继续。我已经根据标签分隔文本并在两者之间放置了一个复选框，但我无法对齐视图，要么它按列排列，要么如果我尝试按行排列文本不会继续。这是我试过的。

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

结果：

Try 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

尝试将文本和复选框包装到 <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>

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

这是输出的快照

注:

我已将文本解析为字符串数组。这是这里的关键逻辑。您决定标记化输入文本的方式将影响组件的呈现。当我尝试使用长字符串作为标记时，flexWrap: 'wrap' 无法正常工作。有关更多详细信息，请参阅此 issue。标记为单个单词可能会完成这项工作。

在反应本机的文本描述之间添加复选框

Adding checkbox in between text description in react native

styles

flexbox

react-native

react-native-android

react-native-ios