Index.js
o createAppContainerestáaparecendo essa mensagem“'createAppContainer'édeclarado,mas seu valor nuncaélido。”。 E o“ import React,{Component} from'react'estácoms mesma mensaguem
import { createStackNavigator, createAppContainer } from 'react-navigation'; import Login from './Login'; import Home from './Home'; const MainNav = createStackNavigator( { Login:{ screen: Login, navigationOptions:{ header: null } }, Home:{ screen: Home, navigationOptions:{ headerTitle: 'Home' } } } ) export default createStackNavigator(MainNav);
Home.js
import { Text, StyleSheet, View } from 'react-native'; export default class Home extends Component{ render(){ return( <view style={styles.container}> <text> Bem vindo a sua Home Page</text> </view> ) } } const styles = StyleSheet.create({ container:{ flex:1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#2c3e50' } })
登录
import { KeyboardAvoidingView, Text, StyleSheet, TextInput, TouchableOpacity, ImageBackground} from 'react-native'; import * as Animatable from "react-native-animatable"; export default function Login() { return ( <ImageBackground source={require('../images/background.png')} style={styles.backgroundImage}> <Animatable.View animation="rubberBand" duration={2500}> <Text style={styles.texto}>SEJA BEM-VINDO(A) AO:</Text> </Animatable.View> <Animatable.Image animation="bounceInDown" duration={1800} style={{ width: 180, height: 180 }} source={require('../images/logo.png')} /> <Animatable.View animation="rubberBand" duration={2500}> <Text style={styles.fraseapp}>Aplicativo para auxílio no acompanhamento do tratamento contra o câncer</Text> </Animatable.View> <KeyboardAvoidingView behavior="position" enabled> <Animatable.View animation="bounceInRight" duration={1100}> <TextInput style={styles.inputUm} placeholder="Digite seu e-mail" autoCorrect={false} /> </Animatable.View> <Animatable.View animation="bounceInRight" duration={1200}> <TextInput style={styles.inputDois} placeholder="Digite sua senha" autoCorrect={false} secureTextEntry= {true} /> </Animatable.View> </KeyboardAvoidingView> <Animatable.View animation="bounceInRight" duration={1400}> <TouchableOpacity style={styles.botaoEntrar} onPress={ () => {this.props.navigation.navigator('Home')} } > <Text style={styles.botaoEntrarTexto}>Entrar</Text> </TouchableOpacity> </Animatable.View> <Animatable.View animation="rubberBand" duration={2600}> <TouchableOpacity style={styles.botaoCadastro}> <Text style={styles.botaoCadastroTexto}>Não tem uma conta? Cadastre-se</Text> </TouchableOpacity> </Animatable.View> <Animatable.View animation="rubberBand" duration={2800}> <TouchableOpacity style={styles.botaoEsqueci}> <Text style={styles.botaoEsqueciTexto}>Esqueci minha senha</Text> </TouchableOpacity> </Animatable.View> </ImageBackground> ) } const styles = StyleSheet.create({ texto: { justifyContent: 'center', alignItems: 'center', color: '#fFF', fontSize: 25, marginTop: 120, fontWeight: 'bold' }, backgroundImage: { flexDirection: 'column', justifyContent: 'flex-start', width: '100%', height: '100%', alignItems: 'center' }, inputUm:{ backgroundColor: '#fff', color: '#222', opacity: 0.9, fontSize: 15, borderRadius: 7, width: 350, marginBottom: 15, padding: 10, marginTop: 50 }, inputDois:{ backgroundColor: '#fff', color: '#222', opacity: 0.9, fontSize: 15, borderRadius: 7, width: 350, marginBottom: 10, padding: 10, marginTop: 5 }, botaoEntrar:{ alignItems: 'center', justifyContent: 'center', backgroundColor: '#35AAFF', height: 45, fontWeight: 'bold', width: 350, borderRadius: 7, marginTop: 40 }, botaoEntrarTexto:{ color: '#FFF', fontSize: 18 }, botaoCadastro:{ marginTop: 15 }, botaoCadastroTexto:{ color:'#fff', fontSize: 12, opacity: 0.9 }, botaoEsqueci:{ marginTop: 10 }, botaoEsqueciTexto:{ color:'#fff', fontSize: 12, opacity: 0.9 }, fraseapp: { color:'#fff', fontSize: 12, marginTop: 0, width: 270, textAlign: 'center', opacity: 0.9 }, })
a linha docódigoqueestádando erroéonéesta o onPress nobotão“ entrar”estou trabalhando com expo react-native
Index.js或createAppContainer的详细信息,“'createAppContainer'é声明,请保留有效的名称。”。从“反应”开始“导入React,{Component}}陷入了困境。
this
关键字在功能组件内部不起作用。然后您可以这样使用,