Я пытаюсь создать мобильное приложение simple-i sh, но я довольно новичок в этом. Я провел некоторое время в поисках ошибок, которые я получаю. Кажется, это общая проблема, но у них у всех были одинаковые / похожие решения, но решения не помогли мне.
Что я пытаюсь сделать? Прямо сейчас приложение состоит из двух страниц: главного экрана (обзорных карточек) и экрана добавления карточек.
- На Обзорных карточках есть кнопка, позволяющая добавить карточку.
- Добавить карточку позволяет заполнить некоторые поля TextInput, а
- Добавить карточку должен позволить нажать кнопку сохранения и вернуться на экран «Обзор карточки» и увидеть данные, которые вы ввели в форму.
Однако я застреваю на шаге 3. Я пытаюсь заставить кнопку «Сохранить» переместить пользователя обратно к обзорным карточкам, но вместо этого есть просто ошибки.
Ниже приведен мой код, ошибки, которые я получаю, а затем то, что я пробовал.
Приложение. js
import React from 'react';
import { StyleSheet, Text, TextInput, View, Button, TouchableOpacity, ShadowPropTypesIOS } from 'react-native';
import AddCard from './components/AddCard.js';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View style={styles.homeContainer}>
<Button title="Add Card" onPress={() => navigation.navigate('Add Card')}/>
{/* <Text value={this.props.inputValFT}/> */}
<Text style={styles.textStyle} >VISA xxxx</Text>
<Text style={styles.textStyle}>MASTERCARD xxxx</Text>
<Text style={styles.textStyle}>AMEX xxxx</Text>
</View>
);
}
function AddCardScreen() {
return (
<View style={styles.addCardContainer}>
<AddCard navigation={this.props.navigation} /> // **HERE**
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview Cards' }} />
<Stack.Screen name="Add Card" component={AddCardScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
// function AddCardButton(){
// return (
// <View style={styles.buttonContainer}>
// <TouchableOpacity>
// <Text style={styles.button}>Add Card</Text>
// </TouchableOpacity>
// </View>
// );
// }
export default App;
const styles = StyleSheet.create({
homeContainer: {
flex: 1,
backgroundColor: '#ef95b1',
alignItems: 'center',
justifyContent: 'flex-start',
},
addCardContainer: {
flex: 1,
backgroundColor: '#28cdf0',
justifyContent: 'flex-start',
},
buttonContainer: {
flexDirection: 'row',
alignSelf: 'flex-end',
marginTop: 15,
},
button: {
flexDirection: 'row',
alignSelf: 'flex-end',
marginTop: 15,
right: 10,
backgroundColor: '#2565ae',
borderWidth: 1,
borderRadius: 12,
color: 'white',
fontSize: 15,
fontWeight: 'bold',
overflow: 'hidden',
padding: 10,
textAlign:'center',
},
textStyle: {
padding: 10,
}
});
Навигация. js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import AddCardScreen from './AddCard';
const RootStack = createStackNavigator(
{
Home: HomeScreen,
AddCard: AddCardScreen,
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ef95b1',
alignItems: 'center',
justifyContent: 'flex-start',
},
textStyle: {
padding: 10,
}
});
export default createAppContainer(Navigation);
AddCard. js
import React, { Component } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity } from 'react-native';
import { Input } from 'react-native-elements'
import { ScrollView } from 'react-native-gesture-handler';
// import { loadSettings, saveSettings } from '../storage/settingsStorage';
class AddCardScreen extends Component {
constructor(props) {
super(props);
this.state = {
firstTwo : '',
lastFour : '',
recentAmt : ''
};
this.addFT = this.addFT.bind(this)
this.addLF = this.addLF.bind(this)
this.addRecAmt = this.addRecAmt.bind(this)
}
static navigationOptions = {
title: 'Add Card'
};
addFT(firstTwo) {
this.setState(Object.assign({}, this.state.firstTwo, { firstTwo }));
}
addLF(lastFour) {
this.setState(Object.assign({}, this.state.lastFour, { lastFour }));
}
addRecAmt(recentAmt) {
this.setState(Object.assign({}, this.state.recentAmt, { recentAmt }));
}
// handleSubmit() {
// alert('New card saved. Returning to Home to view addition.');
// navigation.navigate('Home')
// } // firstTwo, lastFour, recentAmt
render() {
const {navigation} = this.props;
return (
<ScrollView>
<View style={styles.inputContainer}>
<Text h1> "Add a new card!" </Text>
<TextInput
style={styles.textInput}
placeholder="First two digits of card"
placeholderTextColor="#000000"
keyboardType={'number-pad'}
maxLength = {2}
onChangeText={this.addFT}
inputValFT={this.state.firstTwo}
/>
<TextInput
style={styles.textInput}
placeholder="Last four digits of card"
placeholderTextColor="#000000"
keyboardType={'number-pad'}
maxLength = {4}
onChangeText={this.addLF}
inputValLF={this.state.lastFour}
/>
<TextInput
style={styles.textInput}
placeholder="Most recent dollar amount"
placeholderTextColor="#000000"
keyboardType={'decimal-pad'}
onChangeText={this.addRecAmt}
inputValRA={this.state.recentAmt}
/>
</View>
<View style={styles.inputContainer}>
<TouchableOpacity
style={styles.saveButton}
onPress={() => navigation.navigate('Home')}> // ** HERE 2 **
<Text style={styles.saveButtonText}>Save</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
// this.handleSubmit.bind(this)
export default AddCardScreen;
const styles = StyleSheet.create({
inputContainer: {
paddingTop: 15
},
textInput: {
borderColor: '#FFFFFF',
textAlign: 'center',
borderTopWidth: 1,
borderBottomWidth: 1,
height: 50,
fontSize: 17,
paddingLeft: 20,
paddingRight: 20
},
saveButton: {
borderWidth: 1,
borderColor: '#007BFF',
backgroundColor: '#007BFF',
padding: 15,
margin: 5
},
saveButtonText: {
color: '#FFFFFF',
fontSize: 20,
textAlign: 'center'
}
});
Ошибки, которые я получаю:
В приложении. js вы можно увидеть ** ЗДЕСЬ **, который я вставил. Когда я пытаюсь запустить это, приложение загружается нормально, пока я не нажму кнопку «Добавить карту». Я получаю эту ошибку: undefined is not an object (evaluating 'this.props.navigation').
Если я извлекаю часть navigate={this.props.navigation} из приложения. js, приложение загружается так, как и должно быть, но на этот раз я могу нажать «Добавить карту». "и перейдите к следующему экрану без проблем. Я заполняю форму (части TextInput в AddCard. js), но когда я нажимаю кнопку «Сохранить», приложение вылетает. Ошибка: TypeError: undefined is not an object (evaluating 'navigation.navigate'). Скорее всего из-за того, что я делаю с onPress, где написано ** ЗДЕСЬ 2 ** в AddCard. js. handleSubmit () в настоящее время закомментирован, но раньше он был внутри onPress.
Что я пробовал:
Некоторые из ответов, которые я видел, были: нужно передать навигацию от родителя к ребенку, и это заставит его работать. Пытаясь это, я получаю ошибки, которые я упоминал ранее. Я также видел, что кто-то упомянул использование «withNavigation» или «useNavigation», которое должно было позволить ребенку получать доступ к навигации, но у меня это тоже не сработало. Ниже приведены некоторые ссылки, по которым я пытался перейти.
Как передать навигационные реквизиты из родительского компонента в заголовок?
Передать navigation.navigate Детскому компоненту
https://reactnavigation.org/docs/use-navigation/
Спасибо за чтение, надеюсь, мое объяснение достаточно ясно.