react-native - 在反应原生的文本描述之间添加复选框
问题描述
我有一个视图,其中显示了从服务器获取的标题和详细信息,如下所示。
现在,在问题描述中有一个__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>
结果:
我需要复选框在原始图像中的标签等文本之间继续。任何帮助表示赞赏。
解决方案
以下是您的场景的示例工作代码。
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'
无法正常工作。有关详细信息,请参阅此问题。标记为单个单词可能会完成这项工作。
推荐阅读
- kotlin - 让 kotlinx 序列化在多平台项目中工作
- powershell - 通过检查识别隐藏 (MZ) 可执行文件的 PowerShell 脚本 - 错误
- php - 使当前活动的网站页面不在导航栏中重新加载
- python - 如何选择要加载的随机 tmx 地图?在pygame中打开一个随机文件?
- select - 在暂存文件#snowflake-cloud-platform 上选择中的列绑定变量
- php - Windows 10 XAMPP 上的 GetText 无法翻译我的文本
- java - 没有输入任何内容时解析字符串生成我生成的错误消息
- python - 如何获取熊猫数据框重复行的聚合统计信息?
- python - 套接字服务器未在 recv() 上暂停。立即读取 0 字节并关闭
- spring - Spring Cloud Config 客户端执行器刷新