React Native ListItem内文本居中失效问题求助

我正尝试在React Native的ListItem组件内居中显示文本（即框内的文本）。

但无论我尝试什么方法，都无法让文本居中。给文本、TextView或FlatList添加边距、内边距或边框完全不会改变UI；使用textAlign和textAlignVertical仅能移动文本，却无法使其居中，且重启模拟器后，无论样式表如何设置，文本都会恢复到未对齐的状态。

UI代码 #

import DraggableFlatList, { ScaleDecorator, } from "react-native-draggable-flatlist";
import { ListItem, ThemeProvider, theme } from "react-native-design-system";
import { GestureHandlerRootView } from "react-native-gesture-handler";

// Renderer for DraggableFlatList item
const renderListItem = ({ item, drag, isActive, getIndex }) => {
...
return (
    <ScaleDecorator>
        <ListItem
            style={homeStyle.listItem}
            size="lg"
            onLongPress={drag}
            disabled={isActive}
            background={isActive ? "gray300" : "white"}
            onPress={clicked}
            rightIcon={<Text style={homeStyle.clearText} onPress={() => deleteNote(item)}> Clear </Text>}
        >
            <View style={homeStyle.textView}>
                <Text style={homeStyle.listText}>{item.name}</Text>
            </View>
        </ListItem>
    </ScaleDecorator>
    );
};
// Page UI Code
...
<GestureHandlerRootView style={homeStyle.mainContainer}>
<ThemeProvider theme={theme}>
<View style={homeStyle.mainContainer}>
    <View style={homeStyle.topView}>
        <Text style={homeStyle.title}>Notes</Text>
        <Pressable style={[homeStyle.button]} onPress={() => setModalVisible(true)}>
            <Text style={homeStyle.buttonText}>+</Text>
        </Pressable>
    </View>
    <StatusBar style="auto" />
    <DraggableFlatList
        style={homeStyle.flatList}
        data={data}
        onDragEnd={({ data }) => setData(data)}
        keyExtractor={(item) => item.key}
        renderItem={renderListItem}
    />
...
</View>
</ThemeProvider>
</GestureHandlerRootView>

样式代码 #

const homeStyle = StyleSheet.create({
    listItem: {
        height: 60,
        borderColor: '#74b1be',
        backgroundColor: '#2f3241',
        borderWidth: 2,
        margin: 8,
    },
    flatList: {
        height: 650,
    },
    mainContainer: {
        flex: 1,
        backgroundColor: '#2f3241',
    },
    topView: {
        flex: 1,
        flexDirection: "row",
    },
    title: {
        fontFamily: "sans-serif",
        fontSize: 50,
        color: "#74b1be",
        textAlign: 'center',
        alignSelf: 'center',
        margin: 10,
        marginBottom: 0,
    },
    button: {
        borderRadius: 10,
        borderColor: '#74b1be',
        borderWidth: 2,
        backgroundColor: "#2f3241",
        alignSelf: 'center',
        height: 40,
        width: 40,
        marginTop: 17,
    },
    buttonText: {
        color: "#74b1be",
        alignSelf: 'center',
        fontSize: 30,
        margin: -3,
        fontFamily: "sans-serif",
    },
    textView: {
        // flex: 1,
        textAlign: 'center',
        // textAlignVertical: 'center',
        borderWidth: 2,
        borderColor: 'white',
    },
    listText: {
        color: '#74b1be',
        fontSize: 34,
        fontFamily: "sans-serif",
        // flex: 1,
        // textAlign: 'center',
        // textAlignVertical: 'center',
        borderWidth: 2,
        borderColor: 'red',
    },
    clearText: {
        color: "#74b1be",
        fontSize: 20,
        fontFamily: "sans-serif",
    },
});

解决方法 #

1. 调整文本容器布局 #

react-native-design-system的ListItem默认是横向布局，给包裹文本的View添加flex:1并设置居中属性，让它占据ListItem的剩余空间并居中内容：

textView: {
    flex: 1,
    justifyContent: 'center', // 垂直居中
    alignItems: 'center', // 水平居中
    borderWidth: 2,
    borderColor: 'white',
}

2. 优化文本自身对齐 #

给文本添加textAlign: 'center'，确保文本在容器内水平居中：

listText: {
    color: '#74b1be',
    fontSize: 34,
    fontFamily: "sans-serif",
    textAlign: 'center',
    borderWidth: 2,
    borderColor: 'red',
}

3. 清除Metro缓存解决样式失效问题 #

重启模拟器后样式还原是缓存导致的，执行以下操作彻底清理缓存：

• 关闭当前Metro服务，重新执行npm start -- --reset-cache
• 在模拟器中选择"Hard Reload"选项
• 彻底关闭模拟器后重新启动

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