React Native 项目,未生成 index.ios.js 或 index.android.js

IT技术 reactjs react-native
2021-03-31 05:23:21

我今天开始使用 React-Native。我正在关注网络教程。

在我的 Windows 机器上是否正确安装了所有安装:

  • Java Jdk
  • android-studio
  • 节点/NPM

然后安装 react-native

npm install -g react-native-cli

终于有一个你好世界的项目

react-native init albums

我没有收到任何错误。我的应用程序在我的 Android 手机上完美运行(基本上加载)。

app.js 在平台选择上有点条件:

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

我只想知道不生成这些文件是否正常。我要创建那两个索引文件吗?或者最新的 react-native 不需要 2 个单独的文件?(我遵循的教程是 2017 年 1 月的)

项目结构

2个回答

这是添加到 react-native 的新功能。新项目模板现在不包含两个单独的文件。如果您愿意,您仍然可以像以前一样创建和使用,但按原样使用它只是正常的。它只是您的项目的偏好和要求。您可以在此处找到有关更改的更多信息

从提交说明

此更改(最初在 react-community/create-react-native-app#26 中讨论)将 HelloWorld 项目模板从两个几乎相同的入口点(index.android.jsindex.ios.js)移动到单个最小 index.js入口点。根组件在App.js. 这统一了react-native initCreate React Native App 和 Create React Native App之间的项目结构,并允许 CRNA 的弹出使用来自 HelloWorld 模板的入口点,而无需任何黑客对其进行自定义。此外,文档中的示例可以App.js在 HelloWorld 和 CRNA 应用程序中以相同的方式复制粘贴,而无需先了解 AppRegistry.registerComponent.

仅仅是因为新的项目模板现在不单独包含 index.android.js 和 index.ios.js。它现在只包含一个最小的 index.js 入口点。

如果您想为两个/一个平台做一些特定的事情,那么您可以创建自己的 index.android.js 和 index.ios.js 文件,然后只需从 index.js 文件中导入它们中的代码并执行那里有必要的改变。

index.android.js 和 index.ios.js 可以写成:

import Render from './App';

export default Render;