Comment passer un accessoire à un composant d'écran de navigation - React Native
Je suis assez nouveau dans React native. J'ai créé un Drawer Navigator dans mon fichier App.js.
L'un de mes composants de navigation est un composant nommé LoginScreen.
J'essaye de passer un accessoire à LoginScreen pour l'afficher lorsque l'utilisateur y accède.
App.js (Navigateur)
const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
isAdmin: 'false',
checked: false,
}
}
async componentDidMount() {
try {
const adm = await AsyncStorage.getItem('is_admin')
if (adm == null) {
adm = await AsyncStorage.setItem('is_admin', 'false')
}
this.setState({ isAdmin: adm, checked: true })
} catch (error) {
console.log(error)
}
}
render() {
const { isAdmin } = this.state
console.log(isAdmin)
//is admin
return isAdmin == 'true' ? (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={MyStack} />
<Drawer.Screen
name="Admin Panel"
component={props => {
return <LoginScreen props={props} propName = {'Hello'} />
}}
/>
</Drawer.Navigator>
</NavigationContainer>
) : (
//ISNOT ADMIN
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={MyStack} />
<Drawer.Screen name="Login" component={LoginScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}
}
LginScreen.js
const LoginScreen = ({ navigation, propName }) => {
// const [bridge, setB] = useState(false)
return (
<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
<TopHeader
onRefresh={() => fetch_crossings}
onMenuToggle={() => navigation.toggleDrawer()}
/>
<View style={{ flex: 1 }}>
<View
style={{
backgroundColor: '#fff',
margin: 10,
borderRadius: 5,
alignItems: 'center',
padding: 10,
paddingBottom: scale(20),
}}
>
<Avatar
rounded
size={'xlarge'}
overlayContainerStyle={{
backgroundColor: '#185a9d',
}}
icon={{
color: 'orange',
type: 'ionicon',
name: 'ios-log-in',
}}
/>
<Input
placeholder=" Email"
placeholderTextColor={'#292b2c'}
style={{ margin: 5 }}
errorStyle={{ color: '#d9534f' }}
leftIcon={<Icon name="mail" color="#292b2c" />}
errorMessage="Enter a valid Email"
/>
<Divider
style={{
backgroundColor: 'orange',
height: 3,
margin: scale(20),
borderRadius: 3,
}}
/>
<Input
placeholder=" Password"
placeholderTextColor={'#292b2c'}
secureTextEntry={true}
style={{ margin: 5 }}
errorStyle={{ color: '#d9534f' }}
leftIcon={<Icon name={'lock'} color="#292b2c" />}
errorMessage="Enter a valid Email"
/>
</View>
<View
style={{
backgroundColor: '#fff',
margin: 10,
marginTop: 0,
borderRadius: 5,
padding: 10,
}}
>
<Button
buttonStyle={{
margin: 10,
backgroundColor: '#5cb85c',
borderRadius: 4,
alignSelf: 'stretch',
}}
onPress={async () => {
try {
await AsyncStorage.setItem('is_admin', 'false')
**console.log(propName);** //<--Right HERE
navigation.navigate('Home')
} catch (error) {
console.log(error)
}
}}
icon={<Icon name="send" size={15} color="white" />}
iconRight
titleStyle={{ fontWeight: 'bold' }}
title="Submit "
/>
<Button
buttonStyle={{
margin: 10,
backgroundColor: '#d9534f',
borderRadius: 4,
alignSelf: 'stretch',
}}
onPress={() => {
navigation.navigate('Home')
}}
icon={<Icon name="close" size={15} color="white" />}
iconRight
titleStyle={{ fontWeight: 'bold' }}
title={'Close '}
/>
</View>
</View>
</SafeAreaView>
)
}
export default LoginScreen
Chaque fois que je console.log(propName), il dit que c'est indéfini.
Vous pouvez passer des paramètres avec le deuxième argument de la fonction de navigation:
onPress(user) {
this.props.navigation.navigate(
'DetailPage',
{ user },
);
}
Et puis accédez-y dans this.props.navigation.state.params . Par exemple dans votre DetailsPage:
<Text style={styles.myStyle}>{this.props.navigation.state.params.user.name}</Text>
Voici le lien, dans lequel vous trouverez l'exemple