javascript - React Native 某些样式导致 View 无法渲染

Question

嗨，我是 React Native 的新手，正在尝试使用它创建一个 Android 应用程序。如果我更改 View 的样式->(backgroundColor或borrderBottom)，它就不会渲染。任何地方都没有错误，但是在重新加载 js 包时， View 及其所有 subview 都无法渲染。除了解决这个特定问题之外，我更感兴趣的是了解为什么会发生这种情况或者我是否遗漏了某些内容。我的完整组件如下

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

const styles = {
  container: {
    paddingTop: 70,
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#fff',
  },
  form: {
    flex: 1,
    flexDirection: 'column'
  },
  rowContainer: {
    //backgroundColor: '#000',
  },
  row: {
    flexDirection: 'row',
    height: 44,
    alignItems: 'center',
  },
  inputLabel: {
    fontSize: 15,
    paddingLeft: 15,
    color: '#333'
  },
  textInputStyle: {
    fontSize: 15,
    flex: 1,
    paddingLeft: 15
  }
};

export default function TestComponent(props) {
  return (
    <View style={styles.container}>
      <Text> Inside Container </Text>
      <View style={styles.form}>
        <Text> Inside Form </Text>
        <View style={styles.rowContainer} >
          <Text> Inside Row Container </Text>
          <View style={styles.row}>
            <Text numberOfLines={1} style={styles.inputLabel}> Bid On </Text>
            <TextInput />
          </View>
        </View>
      </View>
    </View>
  );
}

上面的代码工作完美，所有组件都被渲染，但是如果我更改 rowContainer 样式并取消注释 backgroundColor、rowContainer 和所有它的子项不会被渲染。我不知道为什么会发生这种情况。我还在 rowContainer 中尝试了其他样式，例如

rowContainer: {

   flex: 1,
   flexDirection: 'column',
   backgroundColor: '#000'
   borderBottomWidth: 1,
   borderColor: '#c8c7cc'
  }

只要 rowContainer 样式为空，它就可以工作，如果我在其中添加任何内容， View 就不会渲染。

Answer 1

默认文本颜色为黑色，rowContainers 背景颜色设置为“#000”。所以它看起来没有被渲染。