React Native - 应用基础

React Native - 您的第一个应用

当您使用 npx react-native init YourProjectName 创建一个新的 React Native 项目时，App.js（如果使用 TypeScript 则是 App.tsx）文件是您应用的主要入口点。它最初通常看起来像这样：

<html>
 <body>
  <p>
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; // These are part of the default template

const Section = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    &lt;View style={styles.sectionContainer}&gt;
      &lt;Text
        style={[
          styles.sectionTitle,
          {color: isDarkMode ? Colors.white : Colors.black,},
        ]}&gt;
        {title}
      &lt;/Text&gt;
      &lt;Text
        style={[
          styles.sectionDescription,
          {color: isDarkMode ? Colors.light : Colors.dark,},
        ]}&gt;
        {children}
      &lt;/Text&gt;
    &lt;/View&gt;
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    &lt;SafeAreaView style={backgroundStyle}&gt;
      &lt;StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} /&gt;
      &lt;ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}&gt;
        &lt;Header /&gt;
        &lt;View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}&gt;
          &lt;Section title="Step One"&gt;
            Edit &lt;Text style={styles.highlight}&gt;App.js&lt;/Text&gt; to change this
            screen and then come back to see your edits.
          &lt;/Section&gt;
          &lt;Section title="See Your Changes"&gt;
            &lt;ReloadInstructions /&gt;
          &lt;/Section&gt;
          &lt;Section title="Debug"&gt;
            &lt;DebugInstructions /&gt;
          &lt;/Section&gt;
          &lt;Section title="Learn More"&gt;
            Read the docs to discover what to do next:
          &lt;/Section&gt;
          &lt;LearnMoreLinks /&gt;
        &lt;/View&gt;
      &lt;/ScrollView&gt;
    &lt;/SafeAreaView&gt;
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
  </p>
 </body>
</html>

这个默认应用展示了 React Native 的一些特性，包括深色模式支持、安全区域视图和可滚动内容。它是理解项目结构的一个不错的起点。

创建一个“Hello, World!”应用

让我们简化 App.js 来显示一个基本的“Hello, World!”消息。将 App.js 的全部内容替换为以下代码：

<html>
 <body>
  <p>
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, StatusBar } from 'react-native';

const App = () => {
  return (
    &lt;SafeAreaView style={styles.safeArea}&gt;
      &lt;StatusBar barStyle="dark-content" /&gt;
      &lt;View style={styles.container}&gt;
        &lt;Text style={styles.text}&gt;Hello, World!&lt;/Text&gt;
        &lt;Text style={styles.text}&gt;Welcome to React Native.&lt;/Text&gt;
      &lt;/View&gt;
    &lt;/SafeAreaView&gt;
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f0f0f0', // Background for the whole safe area
  },
  container: {
    flex: 1, // Take up all available space within SafeAreaView
    backgroundColor: '#fff',
    alignItems: 'center', // Center children horizontally
    justifyContent: 'center', // Center children vertically
  },
  text: {
    fontSize: 20,
    color: '#333',
    marginVertical: 10, // Add some vertical spacing between text elements
  },
});

export default App;
  </p>
 </body>
</html>

输出：保存这些更改后，如果应用启用了 Fast Refresh，它将立即更新，显示“Hello, World!”，紧接着是“Welcome to React Native.”，它们将居中显示在屏幕上。这个简单的例子演示了 React Native 组件的基本结构，使用 View 进行布局，Text 显示文本，并通过 StyleSheet 进行样式设置。