React Native如何实现文本两行显示而非单行？

问题描述 #

我希望下图中的专业名称分为两行显示（当前显示过于拥挤），且每行文本对应图标居中对齐，比如第一个图标对应的文本要显示成“心脏电生理与消融”。我试过用numberOfLines和flexWrap属性，但效果不好。

解决方案 #

核心问题是每个分类项没有固定宽度，导致文本无法触发换行。通过给每个TouchableOpacity设置固定宽度，并让Text组件占满该宽度，就能实现文本自动换行并居中对齐。

修改步骤：

1. 导入Dimensions用于计算屏幕宽度
2. 给每个分类项设置固定宽度，确保每个项有足够空间容纳两行文本
3. 调整Text组件样式，让它占满父容器宽度，触发换行

修改后的代码片段：

import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Text, Image, ScrollView, FlatList, Dimensions } from 'react-native'; // 新增Dimensions导入
import GlobalApi from '../../Services/GlobalApi';
import Colors from '../../../assets/Shared/Colors';
import SubHeading from './SubHeading';
import { useNavigation } from '@react-navigation/native';

export default function Categories() {
    const navigation = useNavigation();
    const [categoryList, setCategoryList] = useState([]);
    const screenWidth = Dimensions.get('window').width; // 获取屏幕宽度

useEffect(() => {
    getCategories();
}, []);

const getCategories = () => {
    GlobalApi.getCategories().then(resp => {
        setCategoryList(resp.data.data);
    });
};

if (!categoryList) {
    return null;
}

return (
    <View style={{ marginTop: 10, paddingHorizontal: 8 }}> {/* 增加左右内边距避免贴边 */}
        <SubHeading subHeadingTitle={'医生专长'} /> {/* 中文翻译标题 */}

        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            <FlatList
                data={categoryList}
                numColumns={5}
                columnWrapperStyle={{
                    flex: 1,
                    justifyContent: 'space-between',
                }}
                renderItem={({ item, index }) =>
                    index < 5 && (
                        <TouchableOpacity
                            onPress={() =>
                                navigation.navigate('hospital-doctor-list-screen', {
                                    categoryName: item.attributes.Name,
                                })
                            }
                            style={{ 
                                alignItems: 'center', 
                                marginVertical: 5,
                                width: (screenWidth - 40) / 5, // 计算每个项的固定宽度
                                paddingHorizontal: 4
                            }}
                        >
                            <View
                                style={{
                                    backgroundColor: Colors.SECONDARY,
                                    padding: 15,
                                    borderRadius: 99,
                                }}
                            >
                                <Image
                                    source={{
                                        uri: item.attributes.Icon.data[0].attributes.url,
                                    }}
                                    style={{
                                        width: 30,
                                        height: 30,
                                    }}
                                />
                            </View>
                            <Text
                                style={{
                                    textAlign: 'center',
                                    marginTop: 5,
                                    flexWrap: 'wrap',
                                    width: '100%', // 文本占满父容器宽度
                                    fontSize: 12, // 可选：调整字体大小优化显示
                                }}
                                numberOfLines={2}
                            >
                                {item.attributes.Name}
                            </Text>
                        </TouchableOpacity>
                    )
                }
            />
        </ScrollView>
    </View>
);
}

说明： #

• 通过(screenWidth - 40)/5计算每个分类项的宽度，减去的40是预留的左右边距和项间距
• Text组件设置width: '100%'后，会在项的宽度范围内自动换行，配合textAlign: 'center'实现居中
• 可选调整fontSize让文本显示更舒适，避免两行仍拥挤

内容的提问来源于stack exchange，提问作者gitit312