React Native安卓12/13设备文本不显示问题求助

问题描述 #

应用打包后在Google Play Console测试发现，安卓12和13设备上存在文本不显示的情况，怀疑与无障碍功能或组件嵌套有关，未找到解决方案，附上相关代码。

代码片段 #

return (
    <>
        <TouchableHighlight
            underlayColor={'#666666bf'}
            onPress={() => sendSomeWhere(props.type)}
            style={[styles.btnUtils, { left: props.position }]}
        >
            <MaterialCommunityIcons name={props.icon} size={25} style={styles.icons} />
        </TouchableHighlight >
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalInfos}
            onRequestClose={() => {
                setModalInfos(!modalInfos);
            }}
        >
            <TouchableOpacity
                onPressOut={() => { setModalInfos(false) }}
                style={styles.touchModal}
            >
            </TouchableOpacity>
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text style={styles.modalTitle}>Légende</Text>
                    <View style={styles.block}>
                        <View style={styles.line}>
                            <View style={styles.left}><Image
                                resizeMode="cover"
                                style={styles.dot}
                                source={require('../../img/marker_nothing.png')}
                            /></View>
                            <Text style={styles.right}>Bar <Text style={styles.bold}>sans terrace ni Happyhour</Text></Text>
                        </View>
                        <View style={styles.line}>
                            <View style={styles.left}><Image
                                resizeMode="cover"
                                style={styles.dot}
                                source={require('../../img/marker_simple_35.png')}
                            /></View>
                            <Text style={styles.right}>Bar encore <Text style={styles.bold}>non référencé</Text></Text>
                        </View>
                        <View style={styles.line}>
                            <View style={styles.left}><Image
                                resizeMode="cover"
                                style={styles.marker}
                                source={require('../../img/marker_NHH.png')}
                            /></View>
                            <Text style={styles.right}>Bar sans terrasse mais avec <Text style={styles.bold}>Happyhour plus tard</Text></Text>
                        </View>
                        
                     ........

                        <TouchableOpacity
                            style={[styles.buttonClose]}
                            onPress={() => setModalInfos(false)}
                        ><Text>✖️</Text></TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    </>
)

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22,
},
btnUtils: {
    zIndex: 3,
    position: 'absolute',
    backgroundColor: '#ffffffcb',
    color: '#FFF',
    top: 13,
    shadowColor: "#000",
    shadowOffset: {
        width: 3,
        height: 3,
    },
    shadowOpacity: 1,
    shadowRadius: 1,

    elevation: 3,
},
icons: {
    color: '#666666',
    padding: 6
},
modalView: {
    width: '95%',
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 15,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
        width: 0,
        height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
},
buttonClose: {
    position: 'absolute',
    top: 0,
    right: 0,
    backgroundColor: "#dddddd",
    padding: 10
},
touchModal: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.5)'
},
modalTitle: {
    fontSize: 25,
    fontWeight: 'bold'
},
block: {
    fontSize: 20,
    paddingVertical: 5,
    flexDirection: 'row',
    flexWrap: 'wrap'
},
line: {
    flexDirection: 'row',
    paddingVertical: 5
},
left: {
    justifyContent: "center",
    alignItems: 'center',
    width: '20%',
    textAlignVertical: 'center',
},
right: {
    alignItems: 'flex-start',
    width: '80%',
    flexDirection: "row",
    paddingHorizontal: 5,
    textAlignVertical: 'center',
},
premiumFont: {
    fontWeight: 'bold',
},
marker: { height: 40, width: 40 },
dot: { height: 20, width: 20 },
bold: {
    fontWeight: '800'
},
shots: {
    flexDirection: "column",
    flexWrap: "wrap",
},
saltIcon: {
    alignSelf: 'center'
},
shotsLine: {
    flexDirection: "row",
    flexWrap: "wrap",
},

})

排查与解决方向 #

1. 修复Modal内部视图层级问题 #

安卓12+对绝对定位元素的层级处理更严格，当前touchModal是绝对定位且在centeredView之前渲染，可能覆盖了模态框内容。调整渲染顺序，将touchModal放到centeredView之后：

<Modal ...>
    <View style={styles.centeredView}>
        <View style={styles.modalView}>
            {/* 模态框内容 */}
        </View>
    </View>
    <TouchableOpacity
        onPressOut={() => { setModalInfos(false) }}
        style={styles.touchModal}
    >
    </TouchableOpacity>
</Modal>

2. 修正Text组件的flex布局设置 #

right样式中给Text组件设置了flexDirection: row，这会导致Text组件内部布局异常，安卓12+的布局引擎对此更敏感。移除该属性，改为设置flex: 1让文本正常换行：

right: {
    alignItems: 'flex-start',
    width: '80%',
    flex: 1,
    paddingHorizontal: 5,
    textAlignVertical: 'center',
},

3. 明确文本颜色，适配安卓12+主题 #

部分安卓12+设备的系统主题可能影响文本默认颜色，给所有Text组件的样式添加明确的颜色值：

modalTitle: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#000'
},
right: {
    alignItems: 'flex-start',
    width: '80%',
    flex: 1,
    paddingHorizontal: 5,
    textAlignVertical: 'center',
    color: '#000'
},

4. 检查无障碍功能适配 #

安卓12+的无障碍设置（如高对比度、字体缩放）可能导致文本显示异常：

• 确保应用支持动态字体大小，使用Text组件的allowFontScaling属性控制缩放行为
• 测试时开启系统无障碍功能，验证文本是否正常显示

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