React Native对代码的更改对模拟器应用程序没有影响？

Question

我正在this tutorial中运行，并且已经达到了将文本显示在模拟器屏幕上（通过Android Studio运行）的程度。

我已将App.js中的代码替换为教程中提到的示例代码。教程说要将此文本放置在android.index.js中，但我无法在项目中的任何位置找到该文件。无论如何，以前位于App.js中的代码都包含在模拟器中显示的文本。

在我进行编辑之前，App.js中的代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @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',
});

type Props = {};
export default class App extends Component<Props> {
  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,
  },
});

而且，在我更换它之后，它是：

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

class ReactCalculator extends Component {

    render() {
        return (
          <View>
            <Text>Hello, React!</Text>
          </View>
        )
    }

}

AppRegistry.registerComponent('ReactCalculator', () => ReactCalculator);

但是，即使我从仿真器中卸载了该应用程序并使用react-native run-android重新安装了该应用程序，文本仍然与上图相同。根据我对代码和教程的理解，应该将其更改为屏幕左上角的无CSS的“ Hell React”。

在基础项目目录中，命令ls -R | grep index.android返回以下内容。我在项目中的任何地方都没有index.android.js。

index.android.bundle
index.android.bundle

编辑我

我在上面的代码中用包围了。另外，index.js文件如下所示：

/** @format */

import {AppRegistry} from 'react-native';
import ReactCalculator from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

我将第二行从import App from './App';更改为import ReactCalculator from './App';，但是两种方法都没有改变。

Answer 1

问题在于重建应用程序。事实证明，命令react-native run-android会在首次运行时构建应用程序，但以后不会生成。我用下面的代码编写了一个bash脚本，以在每次运行应用程序时对其进行强制重建。

将其放在bash脚本中并从项目目录运行

sudo rm -rf android/ ios/ #Delete Android and ios folders first...
react-native eject
react-native upgrade //rebuilds android/ios folders
react-native link
react-native run-android &2> /dev/null
cd ~/Library/Android/sdk # Change this if it's not where you sdk is.
dir=$(pwd)
cd -
echo "sdk.dir=$dir" > android/local.properties
mkdir android/app/src/main/assets
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
react-native run-android