[英]React-Native Native Android Module - Toast Example
I'm trying to learn to work with android native module and using the toast example in the react-native docs. 我正在尝试学习使用android原生模块并在react-native文档中使用toast示例。 ( https://facebook.github.io/react-native/docs/native-modules-android ).
( 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: 我的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 还有我的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 基于你是显示的代码,这是因为你没有正确导入您的模块
App.js
,你应该创建一个文件名为ToastExample.js
在同一目录App.js
然后地方
import {NativeModules} from 'react-native';
module.exports = NativeModules.ToastExample;
if in your ToastModule.java
you have 如果在你的
ToastModule.java
中
@Override
public String getName() {
return "ToastExample";
}
on the getName()
method. 在
getName()
方法上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.