import React from 'react';
import { Button, Image, View, Text,DeviceEventEmitter,ToastAndroid } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // 1.0.0-beta.27
class LogoTitle extends React.Component {
render() {
return (
<Image
source={require('./app_icon.png')}
style={{ width: 30, height: 30 }}
/>
);
}
}
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const params = navigation.state.params || {};
return {
headerTitle: <LogoTitle />,
headerLeft: (
<Button
onPress={() => navigation.navigate('MyModal')}
title="Info"
color="#fff"
/>
),
headerRight: (
<Button onPress={params.increaseCount} title="+1" color="#fff" />
),
};
};
componentDidMount(){
DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{
let title = "React Native界面,收到数据 HomeScreen :" + msg;
console.log("React Native>> " + title)
ToastAndroid.show("发送成功", ToastAndroid.SHORT);
})
}
componentWillUnmount() {
DeviceEventEmitter.removeAllListeners('nativeCallRn');
}
componentWillMount() {
this.props.navigation.setParams({ increaseCount: this._increaseCount });
}
state = {
count: 0,
};
_increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Text>Count: {this.state.count}</Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'First Details',
});
}}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation, navigationOptions }) => {
const { params } = navigation.state;
return {
title: params ? params.otherParam : 'A Nested Details Screen',
/* These values are used instead of the shared configuration! */
headerStyle: {
backgroundColor: navigationOptions.headerTintColor,
},
headerTintColor: navigationOptions.headerStyle.backgroundColor,
};
};
componentDidMount(){
DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{
let title = "React Native界面,收到数据 DetailsScreen :" + msg;
console.log("React Native>> " + title)
ToastAndroid.show("发送成功", ToastAndroid.SHORT);
})
}
componentWillUnmount() {
DeviceEventEmitter.removeAllListeners('nativeCallRn');
}
render() {
/* 2. Read the params from the navigation state */
const { params } = this.props.navigation.state;
const itemId = params ? params.itemId : null;
const otherParam = params ? params.otherParam : null;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
title="Update the title"
onPress={() =>
{
this.props.navigation.setParams({ otherParam: 'Updated!' })
var {NativeModules} = require('react-native');
// let ExampleInterface = NativeModules.ExampleInterface;
NativeModules.ExampleInterface.HandleMessage('testMessage');
} }
/>
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.navigate('Details')}
/>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
}
class ModalScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 30 }}>This is a modal!</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Dismiss"
/>
</View>
);
}
}
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
initialRouteName: 'Home',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
}
);
const RootStack = createStackNavigator(
{
Main: {
screen: MainStack,
},
MyModal: {
screen: ModalScreen,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
package com.learnrn3;
import android.content.Intent;
import android.util.Log;
import com.facebook.react.bridge.ActivityEventListener;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.core.DeviceEventManagerModule;
public class ExampleInterface extends ReactContextBaseJavaModule{
ReactApplicationContext acontext;
ActivityEventListener listener;
public ExampleInterface(ReactApplicationContext reactContext) {
super(reactContext);
acontext = reactContext;
}
@Override
public String getName() {
return "ExampleInterface";
}
@ReactMethod
public void HandleMessage(String message){
Intent intent = new Intent(acontext,Main2Activity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
acontext.startActivity(intent);
}
public void nativeCallRn(String msg) {
acontext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("nativeCallRn",msg);
}
}