我目前正在node.kubernetes.io/role=worker中构建我的登录部分，我想做的是单击App.js时它将进入我的TouchableOpacity。
我尝试了一些教程，并尝试阅读github帖子，但仍然没有结果。
Chat.js我希望它可以导航到\\ App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, KeyboardAvoidingView, TouchableOpacity, TextInput, Button} from 'react-native';
import {StackNavigator, withNavigation} from 'react-navigation';
import Chat from './screens/Chat';
export default class App extends Component {
constructor(props)
{
super(props);
this.state = {
username: '',
password: ''
};
}
render()
{
return(
<KeyboardAvoidingView behavior="padding" style={style.container}>
<View style={style.container}>
<View style={style.logoContainer}>
<Image
style={style.logo}
source={require('./logo/doctor-logo.png')}></Image>
<Text style={style.title} value={this.state.username}>EXAMPLE USERNAME</Text>
</View>
<View style={style.formContainer}>
<TextInput style={styles.input}
placeholder="Email"
keyboardType="email-address"
onChangeText ={(username) => this.setState({username})}
placeholderTextColor="rgba(255,255,255,0.7)"
value={this.state.username}></TextInput>
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="rgba(255,255,255,0.7)"
secureTextEntry
onChangeText ={(password) => this.setState({password})}
value={this.state.password}></TextInput>
<TouchableOpacity style={styles.buttonContainer}
onPress={this.btnClick}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
);
}
btnClick = () => {
alert(this.props.navigation.navigate('Chat'))
}
}
const style = StyleSheet.create({
container:
{
flex: 1,
backgroundColor: '#3498db'
},
logoContainer:
{
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
logo:
{
width:100,
height: 100
},
title:
{
color: "#fff",
marginTop: 10,
width: 140,
textAlign: 'center',
opacity: 0.9 }
});
const styles = StyleSheet.create({
container:
{
padding:20,
backgroundColor: '#3498db'
},
input:
{
height:40,
backgroundColor: 'rgba(255,255,255,0.2)',
marginBottom: 15,
color: '#FFF',
paddingHorizontal: 20
},
buttonContainer:
{
backgroundColor: '#2980b9',
paddingVertical: 15
},
buttonText:
{
textAlign: 'center',
color: '#ffffff',
fontWeight: '700'
}
});
//Chat.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import { Dialogflow_V2 } from 'react-native-dialogflow';
import { dialogflowConfig } from '../env';
const BOT_USER = {
_id: 2,
name: 'FAQ Bot',
avatar: 'https://i.imgur.com/7k12EPD.png'
};
class Chat extends Component {
constructor(props)
{
super(props)
}
state = {
messages: [
{
_id: 1,
text: `Hi! I am the Virtual Assistant ? from Jscrambler.\n\nHow may I help you with today?`,
createdAt: new Date(),
user: BOT_USER
}
]
};
componentDidMount() {
Dialogflow_V2.setConfiguration(
dialogflowConfig.client_email,
dialogflowConfig.private_key,
Dialogflow_V2.LANG_ENGLISH_US,
dialogflowConfig.project_id
);
}
handleGoogleResponse(result) {
let text = result.queryResult.fulfillmentMessages[0].text.text[0];
this.sendBotResponse(text);
}
onSend(messages = []) {
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages)
}));
let message = messages[0].text;
Dialogflow_V2.requestQuery(
message,
result => this.handleGoogleResponse(result),
error => console.log(error)
);
}
sendBotResponse(text) {
let msg = {
_id: this.state.messages.length + 1,
text,
createdAt: new Date(),
user: BOT_USER
};
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, [msg])
}));
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: 1
}}
/>
</View>
);
}
}
export default Chat;
//index.js
import { AppRegistry } from 'react-native';
import App from './App';
import {Component} from 'react'
import { name as appName } from './app.json';
import {StackNavigator} from 'react-navigation';
import Chat from './screens/Chat';
export default class reactNavigationSample extends Component{
render(){
const {navigation} = this.props;
return (
<App navigation={navigation}/>
)
}
}
const Tite = StackNavigator({
App: {screen: App},
Chat: {screen: Chat}
});
AppRegistry.registerComponent(appName, () => Tite);
屏幕，但未显示错误未显示对象。