使用React Native重新构建Web应用程序，第2部分：演示组件和静态页面

我已经花了将近两个月的时间来构建React Web应用程序，尽管它仍在进行中，但我想开始自学React Native来逐步构建应用程序版本。在第1部分中，您可以阅读有关开始安装React Native的更多信息。

在本文中，我将以主页为例，重点介绍如何对应用程序进行基本更新。在我的Web应用程序中，主页是几个演示性组件，包括有关该应用程序和导航栏的一些信息。

首先，我将要处理主屏幕上的信息。我正在从事这个项目，该项目已经熟悉React的核心概念，并且已经构建了一个基本的Web应用程序，因此对我来说，遵循脚手架的React Native 代码非常简单。在即将发布的文章中，我将更仔细地研究React和React Native之间的主要区别以及如何从战略上创建组件，但是出于这篇文章的目的，我实际上只是要更新信息。

到目前为止有什么

提醒一下，我现在正在使用Expo。这使我可以查看手机上的更改，而不必在计算机上使用类似iOS或Android模拟器的功能，尽管这两个选项也都可以使用。

这是创建新项目时的默认屏幕。

使用React Native重新构建Web应用程序，第2部分：演示组件和静态页面

然后，我打开代码进行查看，并开始研究将哪些组件连接到哪些功能，并开始确定下一步。

这样，组件和屏幕之间就存在区别。我可能会在以后重组文件，但现在，我将按照此处的模式进行操作，并仅更新主屏幕文件。

最后，这是我的应用程序的网络版本在欢迎页面上的外观。

我想传达相同的信息（所有文本都是相同的），然后以一种合理且易于阅读的方式来设计其样式，这将在以后的文章中介绍。

更新文字

首先，我专注于在现有组件的结构内更新页面上的某些文本。

文本的此部分与以下手机上的屏幕截图相对应。

我删除了其中的一些文本，然后将其从Web应用程序复制并粘贴到该位置。

我的屏幕没有自动重新加载。如果没有发生这种情况，您可以单击一个链接以获得帮助。该链接建议下载Watchman（我已经安装了）或只是关闭并重新打开该应用程序。

这就是第一次更新的窍门。然后，我摇了摇手机，这将打开开发人员菜单，并禁用然后重新启用实时重新加载。这解决了今后的问题。

格式说明

有一个关于让与格式与之反应原住民你的文字去一些伟大的文档在这里。

我遇到的第一个问题是当我尝试向屏幕主体中添加更多文本时，该红色屏幕非常红屏，但不是特别有用。

我意识到问题是我正在使用<br> </br>标签在组件内拆分文本部分，如下所示：

实际上，我应该继续使用<Text> </ Text>标记。稍后可以在下面添加格式和填充。

本质上，主屏幕（或任何静态屏幕）上的文本应遵循类似这样的模式。

<View style={styles.container}>
        <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}>

   <View style={styles.welcomeContainer}>
       <Text> WELCOME TO LEVEL </Text>
   </View>

   <View style={styles.getStartedContainer}>
            {/* {this._maybeRenderDevelopmentModeWarning()} */}

   <Text style={styles.getStartedText}>Lorem ipsum dolor sit amet,    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>

   <Text style={styles.getStartedText}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>