我正在使用 expo 来测试我的 React Native 应用程序，当使用 iPhone 进行测试时，所有按钮都没有响应。它在 Android 上非常成功，其他功能也可以在 Iphone 上使用。我有一台能够读取数据的扫描仪。您如何解决这个问题？如果我将其部署到生产环境中，这个问题还会继续存在吗？
这是我的 App.js 文件。
// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import BarcodeScannerScreen from './BarcodeScanner.js';
import ProfileScreen from "./views/ProfileScreen"
import BathroomSelectionScreen from "./views/InClubScreens/BathroomSelectionScreen.js"
import ClubDetails from "./views/ClubSelectionScreens/ClubDetails.js"
import ClubMain from "./views/ClubSelectionScreens/ClubMain.js"
import BarSelection from './views/DrinkSelectionScreens/BarSelection.js'
import DrinkMenu from './views/DrinkSelectionScreens/DrinkMenu.js'
import DrinkSelection from './views/DrinkSelectionScreens/DrinkSelection.js'
import BathroomList from "./views/InClubScreens/BathroomList.js"
import Checkout from './views/DrinkSelectionScreens/Checkout.js'
import { MyProvider } from './store/context';
import { StripeProvider } from '@stripe/stripe-react-native';
import { SafeAreaView, StyleSheet } from 'react-native';
const Stack = createStackNavigator();
export default function App() {
return (
<SafeAreaView style={styles.container}>
<StripeProvider
publishableKey="pk_test_51LlDznHYav5iWqq6j2SnnvtwAZXvha9jZERJeilcJeRtpFoZ6eu21ZjiTGun7vvstGLaWsL4FwpsoQ1X25MXxM4W00dzk1zCx9"
//urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
//merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}" // required for Apple Pay
>
<MyProvider>
<NavigationContainer>
<Stack.Navigator initialRouteName="Scanner">
<Stack.Screen name="Scanner" options= {{headerShown:false}} component={BarcodeScannerScreen} />
<Stack.Screen options={{
headerStyle: {
backgroundColor: '#4F47C7',
},
headerTitleStyle: {
fontWeight: 'bold',
},
}} headerStyle name="Profile Creation" component={ProfileScreen}/>
<Stack.Screen name="Bathroom Selection" component={BathroomSelectionScreen} />
<Stack.Screen name="Club Details" component={ClubDetails} options={{
title: '',
}} />
<Stack.Screen name="Club Main" component={ClubMain} options={({ route }) => ({ title: route.params.name })} />
<Stack.Screen name="Bar Selection" component={BarSelection} />
<Stack.Screen name="Drink Menu" component={DrinkMenu} />
<Stack.Screen name="Checkout" component={Checkout} />
<Stack.Screen name="Drink Selection" component={DrinkSelection}
options= {{headerShown:false}}/>
<Stack.Screen name="Bathroom List" component={BathroomList} />
</Stack.Navigator>
</NavigationContainer>
</MyProvider>
</StripeProvider>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
}
})
这是登陆屏幕的代码。扫描仪功能可以工作，并且可以导航，但 onPress 在 Iphone 中不起作用。在安卓上运行成功
// screens/HomeScreen.js
import React, { useState, useContext, useEffect } from 'react';
import { View, TextInput, Button, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { useNavigation } from '@react-navigation/native';
import { MyContext,MyProvider } from './store/context';
import Ionicons from '@expo/vector-icons/Ionicons';
import service from './api/customer'
import { Alert } from "react-native";
export default function HomeScreen() {
const [hasPermission, setHasPermission] = useState(null);
const {state, clear,load} = useContext(MyContext);
const [scanned, setScanned] = useState(false);
const [inputCode, setInputCode] = useState('');
const navigation = useNavigation();
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
console.log(data)
service.getVenueInfo(data)
// You can perform additional checks on the barcode data if needed
.then(jsonData => {
console.log(jsonData)
if(jsonData.data.venue){ //jsonData.action.payload.data.venue
load(jsonData)
navigation.navigate('Club Main', { name: state.venue.venue_name })
}
else{
setScanned(false);
}
})
.catch(error => {console.log(error)
setScanned(false);
});
//navigation.navigate('Club Main', { barcodeData: data });
};
const handleInputChange = (text) => {
setInputCode(text);
};
const handleTextInputSubmit = () => {
// You can perform additional checks on the input code if needed
navigation.navigate('Result', { barcodeData: inputCode });
};
return (
<View style={styles.container}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
<View style={styles.box}>
<View style={[styles.corner, styles.topLeft]} />
<View style={[styles.corner, styles.topRight]} />
<View style={[styles.corner, styles.bottomLeft]} />
<View style={[styles.corner, styles.bottomRight]} />
</View>
<TouchableOpacity style={styles.actionButton} onPress={() => navigation.goBack()}>
<Ionicons name="document-text" onPress={()=>{Alert.alert('Ive been pressed')}} size={32} color="white" />
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
actionButton: {
position: 'absolute',
bottom: 40, // Adjust this value to set the distance from the bottom
right: 40, // Adjust this value to set the distance from the right
width: 60,
height: 60,
borderRadius: 30, // Half of the width and height to make it circular
backgroundColor: '#4F47C7', // Your desired background color
justifyContent: 'center',
alignItems: 'center',
elevation: 5, // Add elevation for a slight shadow effect (Android)
shadowColor: '#000', // Shadow color (iOS)
shadowOffset: { width: 0, height: 2 }, // Shadow offset (iOS)
shadowOpacity: 0.8, // Shadow opacity (iOS)
shadowRadius: 3, // Shadow radius (iOS)
},
scanner: {
width: 300,
height: 300,
marginTop: 20,
},
input: {
borderWidth: 1,
borderColor: 'gray',
borderRadius: 5,
width: 200,
height: 40,
marginTop: 20,
padding: 8,
},
overlay: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 2,
borderColor: 'white',
},
box: {
position: 'absolute',
justifyContent:'center',
width: Dimensions.get('window').width * 0.6,
height: Dimensions.get('window').height * 0.3,
top: (Dimensions.get('window').height * 0.6 - Dimensions.get('window').height * 0.081) / 2,
left: (Dimensions.get('window').width - Dimensions.get('window').width * 0.6) / 2,
},
corner: {
position: 'absolute',
width: 25,
height: 25,
borderWidth: 6,
borderColor: 'white',
},
topLeft: {
top: 0,
left: 0,
borderRightWidth: 0,
borderBottomWidth: 0,
},
topRight: {
top: 0,
right: 0,
borderLeftWidth: 0,
borderBottomWidth: 0,
},
bottomLeft: {
bottom: 0,
left: 0,
borderRightWidth: 0,
borderTopWidth: 0,
},
bottomRight: {
bottom: 0,
right: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
}
});
如果有帮助的话我也可以添加配置文件
哪个 onPress 不起作用？ 我看到你在 Press 上有 2 个动作，两个都在工作.. 在测试零食上
<TouchableOpacity style={styles.actionButton} onPress={() => navigation.goBack()}>
<Ionicons name="document-text" onPress={()=>{Alert.alert('Ive been pressed')}} size={32} color="white" />
</TouchableOpacity>