我正在做一个 react native + firebase 应用程序。目前,每当我按下其中一个页面路由器时,我都在努力让消息弹出,要求输入某个密码。我有 3 个页面嵌套在 StackNavigator 中App.js
。
正如您在以下代码中看到的那样,我有 3 个路由器到这些页面(分别是HelderScreen.js
、LolsScreen.js
和AthleanScreen.js
)。每当我点击这些路由器时,我都希望弹出一条消息,要求为每个路由器提供一个唯一的密码。
这是我的Home.js
主要代码
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity, LayoutAnimation, Image, FlatList, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class HomeScreen extends React.Component {
return (
<View style={styles.container}>
<ScrollView style={styles.flatlist}>
<View style={styles.flatlist1}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Helder')}>
<Text style={styles.item}>Empresa do Helder</Text>
</TouchableOpacity>
</View>
<View style={styles.flatlist1}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Lols')}>
<Text style={styles.item}>Lols Inc</Text>
</TouchableOpacity>
</View>
<View style={styles.flatlist1}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Athlean')}>
<Text style={styles.item}>Tesla Portugal</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}
}
这是 my 的主要代码App.js
,其中包含 StackNavigator 和 BottomStackNavigator
const HomeStack = createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: () => ({
headerShown: false
})
},
Helder: {
screen: HelderScreen,
navigationOptions: () => ({
title: "Helder"
})
},
Athlean: {
screen: AthleanScreen,
navigationOptions: () => ({
title: "Athlean"
})
},
Lols : {
screen: LolsScreen,
navigationOptions: () => ({
title: "Lols"
})
}
});
const AppContainer = createBottomTabNavigator (
{
Home: {
screen: HomeStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name='ios-home' size={24} color={tintColor}/>
}
},
Message: {
screen: MessageScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name='ios-chatboxes' size={24} color={tintColor}/>
}
},
Notification: {
screen: NotificationScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name='ios-notifications' size={24} color={tintColor}/>
}
},
Profile: {
screen: DrawerNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name='ios-person' size={24} color={tintColor}/>
}
},
},
{
defaultNavigationOptions:{
tabBarOnPress: ({navigation, defaultHandler}) => {
if (navigation.state.key === 'Post'){
navigation.navigate('postModal')
} else {
defaultHandler()
}
}
},
tabBarOptions:{
activeTintColor: 'orange',
inactiveTintColor: 'black',
showLabel: false
}
},
{
mode: 'modal',
headerMode: 'none'
}
)
我是 React Native 的新手,你能帮我吗?