Я не могу передать метод класса screenProps. В AppContainer's screenProps я передаю два реквизита changeModalVisibility и thisKeyValueIsDefined и запускаю console.warn, но в консоли отображается только thisKeyValueIsDefined. Пытаюсь использовать screenProps.changeModalVisibility(true) броски и ошибки Undefined/Not a Function.
import React, { Component } from 'react';
import {
Button,
Modal,
SafeAreaView,
StyleSheet,
Text,
View,
} from 'react-native';
import {
createAppContainer,
createStackNavigator,
} from 'react-navigation';
const Home = ({ navigation, screenProps }) => (
<SafeAreaView>
<Button
title = "Go to modal"
onPress = {() => console.warn(screenProps)}
/>
</SafeAreaView>
);
const AppStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions: {
title: 'Home',
},
},
});
const AppContainer = createAppContainer(AppStack);
export default class App extends Component {
state = {
modalVisible: false,
}
modalChangeVisibility = (modalVisible = false) => {
this.setState({ modalVisible });
}
render() {
return (
<View style = {{ flex: 1 }}>
<AppContainer screenProps = {{ changeModalVisibility: this.changeModalVisibility, thisKeyValueIsDefined: true, }} />
<Modal visible = {this.state.modalVisible}>
<SafeAreaView style = {styles.modalContainer}>
<View style = {styles.modalBody}>
<Text>
This modal is just an example.
</Text>
<Button
title = "Close Modal"
onPress = {() => this.modalChangeVisibility(false)}
/>
</View>
</SafeAreaView>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.25)',
alignItems: 'center',
justifyContent: 'center',
},
modalBody: {
backgroundColor: 'white',
width: '80%',
padding: 20,
borderRadius: 5,
}
});
Ищу уже около 4 часов и не могу найти ни блога, ни статьи о том, почему changeModalVisibility не определено.





changeModalVisibility функция не определена в классе App.js. Вот почему вы получаете undefined.
Проблема в том, что вы определили свою функцию как modalChangeVisibility в своем компоненте App, за исключением случаев, когда вы установили ее в своем screenProps, вы назвали ее как this.changeModalVisibility.
В следующем коде я обновил имя, и оно работает.
import React, { Component } from 'react';
import {
Button,
Modal,
SafeAreaView,
StyleSheet,
Text,
View,
} from 'react-native';
import {
createAppContainer,
createStackNavigator,
} from 'react-navigation';
const Home = ({ navigation, screenProps }) => (
<SafeAreaView>
<Button
title = "Go to modal"
onPress = {() => screenProps.changeModalVisibility(true)}
/>
</SafeAreaView>
);
const AppStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions: {
title: 'Home',
},
},
});
const AppContainer = createAppContainer(AppStack);
export default class App extends Component {
state = {
modalVisible: false,
}
modalChangeVisibility = (modalVisible = false) => {
this.setState({ modalVisible });
}
render() {
return (
<View style = {{ flex: 1 }}>
<AppContainer screenProps = {{ changeModalVisibility: this.modalChangeVisibility, thisKeyValueIsDefined: true, }} />
<Modal visible = {this.state.modalVisible}>
<SafeAreaView style = {styles.modalContainer}>
<View style = {styles.modalBody}>
<Text>
This modal is just an example.
</Text>
<Button
title = "Close Modal"
onPress = {() => this.modalChangeVisibility(false)}
/>
</View>
</SafeAreaView>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.25)',
alignItems: 'center',
justifyContent: 'center',
},
modalBody: {
backgroundColor: 'white',
width: '80%',
padding: 20,
borderRadius: 5,
}
});