反应本机nativebase复选框：复选框内的文本走出屏幕答案

【问题标题】：React native nativebase checkbox: Text inside a checkbox going out of the screen反应本机nativebase复选框：复选框内的文本走出屏幕
【发布时间】：2022-02-24 05:23:58
【问题描述】：

我不能让它工作，复选框（nativebase）内的文本没有缩小，有人知道为什么吗？我是否缺少一些 flex 属性？

import React from "react"
import {Box, Center, Checkbox, Heading, NativeBaseProvider, Text} from "native-base"

export const List = () => {
    return (
        <Box mb="10%" mt="30%" width="80%" height="80%" maxHeight="80%">
            <Checkbox value={"superlongipermegatest"}>
                <Text mx="2">
                    superlongipermegatest
                </Text>
            </Checkbox>
        </Box>
    )
}

export default () => {
    return (
        <NativeBaseProvider>
            <Center
                flex={1}
                px="1">
                <List/>
            </Center>
        </NativeBaseProvider>
    )
}

【问题讨论】：

标签： javascript reactjs react-native checkbox native-base

【解决方案1】：

将您的 Checkbox 包装在 Box 中：<Box width="100%"> 这会将内容限制为其父级并包装文本。

<Box mb="10%" mt="30%" width="80%" height="80%" maxHeight="80%">
    <Box width="100%">
        <Checkbox value={"superlongipermegatest"}>
            <Text mx="2">
                superlongipermegatest
            </Text>
        </Checkbox>
    </Box>
</Box>

【讨论】：