Question

当然，在Web项目中，像下面这样使用div很明显：

<div>
  sample text
</div>

但是，这是导致React Native错误的原因：

<View>
  sample text
</View>

如何修改或包装或使用View之类的div？

Answer 1

我确信您已经发现您不能在react-native内部使用<View>。您必须使用从<Text>和<View> <Text>sample text</Text> </View>构造的组件

如果要在屏幕上显示文本，则必须将其包装在“文本”标签中。

因此您可以执行以下操作，它将在屏幕上显示您的文本。

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

class HelloReactNative extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React, you'll also like React Native.
        </Text>
        <Text>
          Instead of 'div' and 'span', you'll use native components
          like 'View' and 'Text'.
        </Text>
      </View>
    );
  }
}

看一下react-native的文档。他们有很多很好的例子https://facebook.github.io/react-native/

在他们的第一页上，他们展示了如何构造一个简单的组件

vagrant@smyprojectt:~$ curl -X POST -v http://127.0.0.1:8080/api/xml/
*   Trying 127.0.0.1...
* TCP_NODELAY set
* connect to 127.0.0.1 port 8080 failed: Connection refused
* Failed to connect to 127.0.0.1 port 8080: Connection refused
* Closing connection 0
curl: (7) Failed to connect to 127.0.0.1 port 8080: Connection refused

他们的其余文档中充满了有关如何设置和制作自己的组件的有用示例。

要详细了解React和React-Native之间的区别，请参见https://medium.com/appnroll-publication/switch-between-react-and-react-native-548267e1348a

Answer 2

您可以将div与View进行比较，但是有一个限制，即只能在Text标签内显示字符串。

<View>
  <Text>sample text</Text>
</View>

如何在Web Project中像div标签一样使用View

2 个答案: