Question

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

class First extends Component {
render () {
    return (
        <View style = {styles.container}>
            <Text>
                Hello world!
            </Text>
        </View>
    );
    }
}

const styles = StyleSheet.create ({
container: {
    backgroundColor: 'yellow',
    flex: 1
}
});


module.exports = First;

此代码在以react-native init开头的项目中用黄色填充屏幕，但在以create-react-native-app开头的项目中没有显示任何内容。这是正常的吗？

编辑：这是从主App.js中的样式View错误调用的。

Answer 1

愚蠢的错误;我从主App.js的样式View调用此组件。谢谢你花时间帮忙，伙计们。

Answer 2

它会帮助你

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

class First extends Component {
render () {
return (
    <View>
        <Text style = {styles.container}>
            Hello world!
        </Text>
    </View>
   );
  }
  }

 const styles = StyleSheet.create ({
 container: {
 backgroundColor: 'yellow',
 flex: 1
 }
});


module.exports = First;

Answer 3

我使用了您的代码，并使用create-react-native-app创建应用，并在左上方显示带有文字hello world!的黄色背景颜色

这是我有the-result-using-create-react-native-app

的结果

也许您应该使用create-react-native-add命令创建另一个测试应用程序并查看结果

React Native：Flex表现不同

3 个答案: