React Native导入外部js自定义组件样式不生效问题排查

• 核心错误是独立组件Form1.js的样式表存在非法配置：你把组件属性placeholder写进了StyleSheet.create的样式规则里，React Native解析样式表时遇到非样式属性会直接导致整个样式对象失效，这是拆分文件后样式不生效的根本原因。
• 样式规则本身存在无效配置：alignItems、justifyContent是父容器控制子元素布局的属性，直接写在Text、TextInput这类展示组件上不会生效。
• 布局约束缺失：Form1最外层的View没有设置居中对齐规则，内部元素默认靠左排列，和你写在同文件时复用App.js样式的展示效果不一致，看起来像是样式失效。
• 你在同文件写组件时直接复用了App.js里无错误的样式对象，所以能正常展示，拆分文件后调用了自身带错误的styles2，才出现异常。

直接替换Form1.js的全部代码为以下修正版本即可：

import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

class Form1 extends React.Component {
    render() {
        return (
            <View style={styles2.formWrap}>
                <Text style={styles2.centerBox}>Age: </Text>
                <TextInput style={styles2.input} placeholder='Example' />
            </View>
        )
    }
}

const styles2 = StyleSheet.create({
    formWrap: {
        alignItems: 'center',
        width: '100%'
    },
    input: {
        borderWidth: 1,
        borderColor: '#777',
        padding: 8,
        margin: 10,
        width: 200,
    },
    centerBox: {
        alignSelf: 'center',
        textAlign: 'center',
        borderWidth: 1,
        width: 150,
    },
});

export default Form1;

修正点说明 #

• 移除了样式表中非法的placeholder配置，该属性是TextInput的组件属性，只能写在组件标签上，不能写入样式规则
• 给组件最外层容器新增formWrap样式，设置子元素居中对齐，匹配App.js的布局逻辑
• 补全centerBox的边框、宽度配置，和App.js里的文本标签样式保持一致
• 删除了写在子组件样式里的无效布局属性，避免冗余无效配置

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