当字体大小在本机反应中增加时，文本不会换行

Posted 2023-02-16

【中文标题】当字体大小在本机反应中增加时，文本不会换行

【英文标题】：Text doesn't wrap when the font size is increased in react native

【发布时间】：2022-01-20 15:43:27

【问题描述】：

我正在尝试增加标题文本的字体大小并使其换行，但是，一旦我增加了字体大小，它就不会换行。我想让标题文本换行并且仍然能够增加字体。但是textAlign: "center" 似乎对它没有影响。

请问，我如何才能像第二张图片那样实现它？

这是我目前的代码。

function OnboardingScreen() 
    return (
        <SafeAreaScreen>
            <View style=styles.container>
                
                <View style=styles.swiperContainer>
                    <Swiper>

                        <View style=styles.slide>
                            <Text style=styles.titleText>Hello there,</Text>
                            <Text style=styles.textSubTitle>Welcome to Sherz, We are glad to have you.</Text>
                        </View>
                        <View style=styles.slide>
                            <Text
                                // numberOfLines=2
                                style=styles.titleText>Easy, smart
                                and reliable</Text>
                            <Text style=styles.textSubTitle>You don’t have to worry about
                                market hassle, we are here for you.</Text>
                        </View>
                        <View style=styles.slide>
                            <Text style=styles.titleText>Hello there,</Text>
                            <Text style=styles.textSubTitle>Welcome to Sherz, We are glad to have you.</Text>
                        </View>
                        <View style=styles.slide>
                            <Text style=styles.titleText>Hello there,</Text>
                            <Text style=styles.textSubTitle>Welcome to Sherz, We are glad to have you.</Text>
                        </View>

                    </Swiper>
                </View>
            </View>
        </SafeAreaScreen>
    );


const styles = StyleSheet.create(
    container: 
        flex: 1,
    ,
    image: 
        flex: 0.5,
    ,
    closeIcon: 
        width: WP(5),
        height: WP(5),
        left: WP(90),
        top: HP(2),
    ,
    swiperContainer: 
        flex: 0.5,
    ,
    slide: 
        height: WP(15),
        width: WP(70),
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: HP(5),
        alignSelf: 'center',
    ,
    titleText: 
        fontSize: WP(8),
        // width: WP(70),
        fontWeight: 'bold',
        textAlign: 'center',
        // backgroundColor: 'red',
    ,
    textSubTitle: 
        fontSize: WP(4),
        marginTop: HP(2),
        textAlign: 'center',
    ,
)

这就是我现在所取得的成就

这就是我想要实现的目标

【参考方案1】：

实现这一点的一种简单方法是使用两个 Text 包装器，如下所示：

function OnboardingScreen() 
    return (
        <SafeAreaScreen>
            <View style=styles.container>
                
                <View style=styles.swiperContainer>
                    <Swiper>

                        <View style=styles.slide>
                            <Text style=styles.titleText>Hello there,</Text>
                            <Text style=styles.textSubTitle>Welcome to Sherz, We are glad to have you.</Text>
                        </View>
                        <View style=styles.slide>
                            <Text style=styles.titleText>Easy, smart </Text>
                            <Text style=styles.titleText>and reliable </Text>
                            <Text style=styles.textSubTitle>You don’t have to worry about
                                market hassle, we are here for you.</Text>
                        </View>
                        <View style=styles.slide>
                            <Text style=styles.titleText>Hello there,</Text>
                            <Text style=styles.textSubTitle>Welcome to Sherz, We are glad to have you.</Text>
                        </View>
                        <View style=styles.slide>
                            <Text style=styles.titleText>Hello there,</Text>
                            <Text style=styles.textSubTitle>Welcome to Sherz, We are glad to have you.</Text>
                        </View>

                    </Swiper>
                </View>
            </View>
        </SafeAreaScreen>
    );


const styles = StyleSheet.create(
    container: 
        flex: 1,
    ,
    image: 
        flex: 0.5,
    ,
    closeIcon: 
        width: WP(5),
        height: WP(5),
        left: WP(90),
        top: HP(2),
    ,
    swiperContainer: 
        flex: 0.5,
    ,
    slide: 
        height: WP(15),
        width: WP(70),
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: HP(5),
        alignSelf: 'center',
    ,
    titleText: 
        fontSize: WP(8),
        // width: WP(70),
        fontWeight: 'bold',
        textAlign: 'center',
        // backgroundColor: 'red',
    ,
    textSubTitle: 
        fontSize: WP(4),
        marginTop: HP(2),
        textAlign: 'center',
    ,
)