Question

我正在使用example found here并且当前面临的问题是吐司面包根本没有显示……我只是最初的“欢迎使用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的附加文件，其中包含基于the answer found here

的以下内容

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

包裹名称很简单

com.testapp

我不知道为什么烤面包片从不显示？我知道react提供了Toast支持，但是希望在一个初始示例的基础上加入更多高级Java / Android代码...

Answer 1

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

return(
    <ToastExample/>
)

除此之外，您还将创建一个仅可用于android的android native模块。但是根据我的观点，您可以使用Toast消息模块，该模块可以在Android和Ios中使用。否则，您需要创建ios基本本地模块以为ios创建Toast。如果您不想基于ios的实现，则可以使用此本机模块。但是您通过它阻止了Ios部署。

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

Answer 2

感谢@Ariel和@Lucefer提供反馈，我进行了您建议的更新，但遇到了另一个错误。发布此答案可避免任何人因将Android Studio作为带有React Native的IDE使用而引起的潜在头痛。原来MainApplication.java文件有2项（导入的CustomToastPackage和ReactPackage）变灰了，永远无法找出原因？请参见下面的屏幕截图

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

Answer 3

尝试一下：

<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即可对本机做出反应

React Native Native Java / Android模块-不显示吐司消息

3 个答案: