#react-native-android
#react-native
Вопрос:
Новичок в react-native и пытается сделать react-native с помощью примера приложения. Я создал два экрана. Экран ВХОДА В систему И ФОРМЫ. Я хочу, чтобы после нажатия кнопки входа в систему он переходил на экран формы. Я добавляю библиотеку навигации для маршрутизации. Но он показывает ошибку.
App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/pages/pages/Login';
import Form from './src/pages/pages/Form';
const AppNavigator = StackNavigator({
Login: { screen: Login},
Form: { screen: Form},
});
export default class App extends Component<{}> {
render() {
return (
<View style ={styles.container}>
<AppNavigator/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
TouchableOpacity
} from 'react-native';
export default class Login extends Component {
state = {
username: '', password: ''
}
onChangeText = (key, val) => {
this.setState({ [key]: val })
}
signUp = async () => {
const { username, password } = this.state
try {
// here place your signup logic
console.log('user successfully signed up!: ', success)
} catch (err) {
console.log('error signing up: ', err)
}
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='Username'
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('username', val)}
/>
<TextInput
style={styles.input}
placeholder='Password'
secureTextEntry={true}
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('password', val)}
/>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Form') } title = "Form"
>
<Text > LOGIN </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
width: 350,
height: 55,
backgroundColor: '#ff4000',
margin: 10,
padding: 8,
color: 'white',
borderRadius: 4,
fontSize: 18,
fontWeight: '500',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
alignItems: 'center',
backgroundColor: '#58d63b',
padding: 10,
width:320,
height:55
}
})
Form.js
import React, {Component} from 'react';
import {View,Text} from 'react';
export default class Login extends Component {
render() {
return (
<View>
<Text> This Is Form Page</Text>
</View>
);
}
}
index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
ЭТО ОШИБКА, КОТОРУЮ Я ПОЛУЧАЮ ВСЕ ВРЕМЯ
Я перепробовал все, очистил кеш и переустановил npm, но безуспешно. Любой может помочь.Было бы здорово.
Комментарии:
1. я, наконец, нахожу решение.
2. проблема в том, что обработчик собственных жестов не добавлен в проект. Итак, сначала добавьте yarn в проект, если yarn там нет, а затем через yarn добавьте плагин для обработки жестов. Затем также в App.js {createStackNavigation,createAppContainer} импортировано, поскольку StackNavigation обесценился. и последнее, добавьте экспорт по умолчанию createAppContainer(…).