React-Native Native Android 模块 - Toast 示例 [英] React-Native Native Android Module - Toast Example

问题描述

我正在尝试学习使用 android 本机模块并使用 react-native 文档中的 toast 示例.(

解决方案

根据您显示的代码，这是因为您没有正确导入 App.js 中的模块，您应该在与 App.js 相同的目录中创建一个名为 ToastExample.js 的文件，然后放置

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

如果在你的 ToastModule.java 中有

@Override公共字符串 getName() {返回吐司示例"；}

在 getName() 方法上.

I'm trying to learn to work with android native module and using the toast example in the react-native docs. (https://facebook.github.io/react-native/docs/native-modules-android). However, I am facing an issue where the native module that I was trying to export was unable to be resolved/undefine.

My directory structure is as followed:

example
 -android
   -app
     -src
       -main
        - java
          -com
           -example
             -CustomToastPackage.java
             -ToastModule.java
             -MainActivity.java
             -MainApplication.java
        - res
        - AndroidManifest.xml
 -ios
 -app.js
 -index.js
 -package.json

My 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.ToastAndroidTutorial;//Added this

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

And my 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}>

     ToastExample.show('Awesome', ToastExample.SHORT);//Added this

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

This is the error I am getting.

解决方案

Based on the code you are showing, this is because you are not correctly importing the Module in your App.js, you should create a file named ToastExample.js in the same directory as App.js and then place

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

if in your ToastModule.java you have

@Override
  public String getName() {
    return "ToastExample";
  }

on the getName() method.

这篇关于React-Native Native Android 模块 - Toast 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！