我已经开始使用这个基础项目（React Native Firebase）：
https://github.com/invertase/react-native-firebase
我已经集成了React Native Navigation V2：
https://wix.github.io/react-native-navigation/v2/#/
以及React Native Splash Screen（npm包react-native-splash-screen）：
https://github.com/crazycodeboy/react-native-splash-screen
它是基于本教程集成的：
根据react-native-navigation文档，我最近的更改是 setRoot() 到我的 Navigation.onAppLaunched(()=>{Navigation.setRoot({...})}) 内的SplashScreen，然后一旦安装了SplashScreen组件，它就会使用 setRoot() 导航到LoginScreen .
它看起来不错，但是当应用程序完成加载并登陆登录屏幕时，除非我使用Cmd m>“切换检查器”打开和关闭检查器，否则屏幕上不会有任何触摸 .
这是一些代码，首先是AndroidManifest.xml：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.jaqstudios.plantlife"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="22" />
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".SplashActivity"
android:theme="@style/SplashTheme"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize"
android:exported="true"
/>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
这是MainActivity，它从react-native-navigation包扩展了NavigationActivity：
package com.jaqstudios.plantlife;
import com.reactnativenavigation.NavigationActivity;
import org.devio.rn.splashscreen.SplashScreen; // import this
import android.os.Bundle; // import this
public class MainActivity extends NavigationActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);
super.onCreate(savedInstanceState);
}
}
这是我想在NavigationActivity之前发生的SplashActivity：
package com.jaqstudios.plantlife;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}
然后在js世界中我的index.js是：
import { AppRegistry } from 'react-native';
import { PlantLifeApp, start } from './src/PlantLifeApp';
// AppRegistry.registerComponent('plantlife', () => PlantLifeApp);
start();
这是在我的主App.js文件中定义start函数的地方：
import React from 'react';
import { StyleSheet, Platform, Image, Text, View, ScrollView } from 'react-native';
import firebase, { RNFirebase } from 'react-native-firebase';
import { Navigation } from 'react-native-navigation';
import registerScreens from './screens';
import testIDs from './testIDs';
import * as RNFB from '../assets/RNFirebase.png';
if (Platform.OS === 'android') {
alert = (title) => {
consloe.log('ALERT CALLED');
// Navigation.showOverlay({
// component: {
// name: 'navigation.playground.alert',
// passProps: {
// title
// },
// options: {
// overlay: {
// interceptTouchOutside: true
// }
// }
// }
// });
};
}
console.log('PlantLifeApp starting...');
export function start() {
registerScreens();
Navigation.events().onAppLaunched(() => {
Navigation.setDefaultOptions({
_animations: {
startApp: {
y: {
from: 1000,
to: 0,
duration: 500,
interpolation: 'accelerate',
},
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'accelerate'
}
},
push: {
topBar: {
id: 'TEST',
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'accelerate'
}
},
bottomTabs: {
y: {
from: 1000,
to: 0,
duration: 500,
interpolation: 'decelerate',
},
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'decelerate'
}
},
bottomTabs: {
y: {
from: 1000,
to: 0,
duration: 500,
interpolation: 'decelerate',
},
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'decelerate'
}
},
content: {
y: {
from: 1000,
to: 0,
duration: 500,
interpolation: 'accelerate',
},
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'accelerate'
}
}
},
pop: {
topBar: {
id: 'TEST',
alpha: {
from: 1,
to: 0,
duration: 500,
interpolation: 'accelerate'
}
},
bottomTabs: {
y: {
from: 0,
to: 100,
duration: 500,
interpolation: 'accelerate',
},
alpha: {
from: 1,
to: 0,
duration: 500,
interpolation: 'accelerate'
}
},
bottomTabs: {
y: {
from: 0,
to: 100,
duration: 500,
interpolation: 'decelerate',
},
alpha: {
from: 1,
to: 0,
duration: 500,
interpolation: 'decelerate'
}
},
content: {
y: {
from: 0,
to: 1000,
duration: 500,
interpolation: 'decelerate',
},
alpha: {
from: 1,
to: 0,
duration: 500,
interpolation: 'decelerate'
}
}
}
}
});
Navigation.setRoot({
component: {
name: 'navigation.playground.SplashScreen'
}
});
console.log('app launched, navigation root set...');
});
}
export class PlantLifeApp extends React.Component {
constructor() {
super();
this.state = {
// firebase things?
};
}
componentDidMount() {
// firebase things?
}
render() {
return (
<ScrollView>
<View style={styles.container}>
<Image source={ RNFB } style={[styles.logo]} />
<Text style={styles.instructions}>
Current selected menu item is: {this.state.selectedItem}
</Text>
<Text style={styles.welcome}>
Welcome to the React Native{'\n'}Firebase starter project!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
{Platform.OS === 'ios' ? (
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
) : (
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Cmd+M or shake for dev menu
</Text>
)}
<View style={styles.modules}>
<Text style={styles.modulesHeader}>The following Firebase modules are enabled:</Text>
{firebase.admob.nativeModuleExists && <Text style={styles.module}>Admob</Text>}
</View>
</View>
</ScrollView>
);
}
}
这是我注册屏幕的地方：
import { Navigation } from 'react-native-navigation';
import SplashScreen from './SplashScreen';
import LoginScreen from './LoginScreen';
import WelcomeScreen from './WelcomeScreen';
import SideMenuScreen from './SideMenuScreen';
import PlantListScreen from './PlantListScreen';
export default function registerScreens() {
Navigation.registerComponent(`navigation.playground.SplashScreen`, () => SplashScreen)
Navigation.registerComponent(`navigation.playground.LoginScreen`, () => LoginScreen)
Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
Navigation.registerComponent('navigation.playground.SideMenuScreen', () => SideMenuScreen);
Navigation.registerComponent(`navigation.playground.PlantListScreen`, () => PlantListScreen);
console.log('screens registered...');
}
这是SplashScreen：
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
StatusBar
} from 'react-native';
import RNSS from 'react-native-splash-screen';
import { Navigation } from 'react-native-navigation';
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',
});
export default class SplashScreen extends Component {
componentDidMount() {
RNSS.hide();
Navigation.setRoot({
component: {
name: 'navigation.playground.LoginScreen'
}
});
}
render() {
return (
<View style={styles.container}>
<StatusBar
barStyle="light-content"
backgroundColor="#4F6D7A"
/>
<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: '#4F6D7A',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#F5FCFF',
},
instructions: {
textAlign: 'center',
color: '#F5FCFF',
marginBottom: 5,
},
});
最后，这是LoginScreen：
import React, { Component } from 'react';
import {
View,
Image,
StyleSheet,
TextInput,
TouchableOpacity,
Text
} from 'react-native';
import gembul from '../../assets/gembul.png';
export default class LoginScreen extends Component {
state = {
logging: false
};
// This is for demo only, normally you want to create an api wrapper
async callLoginAPI() {
this.setState({ logging: true });
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
alert('SIGN IN success');
this.setState({ logging: false });
}
render() {
return (
<View style={styles.container}>
<View
style={{
flex: 1
}}
>
<Image
resizeMode="cover"
style={[
{
width: '100%',
height: '100%',
overflow: 'visible'
}
]}
source={gembul}
/>
</View>
<TextInput
placeholder="Username"
style={[styles.textInput, { marginTop: 40 }]}
/>
<TextInput
placeholder="Password"
style={[styles.textInput, { marginVertical: 20 }]}
/>
<TouchableOpacity
onPress={() => {
this.callLoginAPI();
}}
style={[styles.button]}
>
<Text style={{ color: 'white', fontSize: 20, fontWeight: '600' }}>
SIGN IN
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
alignSelf: 'flex-end',
height: 40,
justifyContent: 'center',
marginBottom: 20
}}
>
<Text style={{ color: '#BDC3C6', fontSize: 15 }}>
Need Help?
</Text>
</TouchableOpacity>
<Text style={{ alignSelf: 'center', color: '#A6A8A9', fontSize: 15 }}>
Don’t have an account yet ?
</Text>
<TouchableOpacity
style={{
alignSelf: 'center',
height: 34,
justifyContent: 'center'
}}
>
<Text style={{ color: '#0D92CA', fontSize: 15 }}>
Create an account
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 26,
paddingTop: 26,
paddingBottom: 18
},
logo: {
flex: 1,
alignItems: 'center',
backgroundColor: 'grey'
},
textInput: {
height: 60,
borderRadius: 3,
borderWidth: 1,
borderColor: '#ECF0F3',
paddingHorizontal: 19
},
button: {
height: 60,
borderRadius: 3,
backgroundColor: '#11B8FF',
justifyContent: 'center',
alignItems: 'center'
}
});
上面提到过，流程似乎都很好 . 应用程序打开到初始屏幕，启动屏幕由 RNSS.hide() 关闭， Navigation.setRoot() 将用户发送到SplashScreen componentDidMount中的LoginScreen . 但是一旦登录屏幕出现，我的应用程序上没有注册屏幕触摸（即我无法修改登录凭据），除非我切换检查器 . 我还应该注意，我的登录屏幕来自以下教程：
https://medium.com/@bosung90/use-higher-order-component-in-react-native-df44e634e860
我无法从第一个片段开始工作，这是一个简单的登录页面，基本上是从该教程的第一个代码片段中复制粘贴的：
https://gist.github.com/bosung90/66f70041586a8e05b41a60ee09109519
谢谢 .