0

我正在使用此处找到的示例，并且目前面临吐司根本没有显示的问题...我只有最初的“欢迎使用 React Native！” 模拟器中的画面。我的应用程序结构如下：

testApp
  android
    app
      src
        main
          java
            com
              testApp
                CustomToastPackage.java
                MainActivity.java
                MainApplication.java
                ToastModule.java              
          res
          assets
            index.android.bundle
          AndroidManifest.xml
  ios
  node_modules
  app.json
  App.js
  index.js
  package.json
  ToastExample.js
  yarn.lock

我的 index.js

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

import {NativeModules} from 'react-native'; //Added this

module.exports = NativeModules.testApp; //Added this

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

我的 App.js

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

import ToastExample from './ToastExample'; //Added this

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,
  },
});

从文件结构中可以看出，我创建了一个名为 ToastExample.js 的附加文件，其中包含基于此处找到的答案的以下内容

import {NativeModules} from 'react-native';
module.exports = NativeModules.ToastExample;

包名很简单

com.testapp

我不明白为什么吐司从来没有出现过？我知道 react 带有 toast 支持，但希望在初始示例的基础上包含更高级的 Java/Android 代码......

4

3 回答 3

0

感谢@Ariel 和@Lucefer 的反馈，我进行了您建议的更新，但遇到了另一个错误。发布此答案是为了避免因将 Android Studio 作为 IDE 与 React Native 一起使用而引起的任何潜在头痛。原来 MainApplication.java 文件有 2 个项目（CustomToastPackage 和 ReactPackage 的导入）变灰并且永远无法弄清楚为什么？请看下面的截图

在此处输入图像描述

我创建了一个单独的应用程序（react-native init newapp）并使用了一个简单的文本编辑器（Atom 或 gedit 将代替 Android Studio）进行更改，示例现在运行良好。

于 2018-10-31T18:36:57.137 回答
0

在您的示例中，您没有添加ToastExampleindex.js，您需要将其添加到 index.js 的渲染方法中，如下所示。

return(
    <ToastExample/>
)

除此之外，您将创建一个只能用于 android 的 android 原生模块。但根据我的观点，您可以使用可在 Android 和 Ios 中使用的 toast 消息模块。否则，您需要创建 ios 基础原生模块来为 ios 创建 toast。如果你不想使用 ios 基础实现，可以使用这个原生模块。但是您通过它阻止了您的 Ios 部署。

我想为你推荐这个https://github.com/crazycodeboy/react-native-easy-toast#readme easy-toast。它适用于 Android 和 IOS 设备。您也可以像 android native toast 一样自定义它。它很容易在您的应用程序中实现。

于 2018-10-31T14:24:56.397 回答
0

尝试这个：

<Root>
<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>
</Root>

只需导入 Root 即可做出原生反应

于 2019-03-12T09:57:17.187 回答