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

【问题标题】：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',
    },
})

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

这就是我想要实现的目标

【问题讨论】：

标签： css react-native text

【解决方案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',
    },
})

【讨论】：