TypeError: undefined is not an object（評估'_this.showActionSheet'）

Question

我正在使用 react-native 構建一個隨機應用程序。 我正在嘗試創建一個通過按鈕激活的操作表，但我不斷收到此錯誤。 當我第一次運行該應用程序時它工作正常，但是當我再次重新加載該應用程序時，我每次都會收到此錯誤。 我嘗試使用我在網上找到的許多其他東西，但得到了相同的結果。 請幫忙，我是 react-native 的新手:(

import React from 'react';
import {Text, View, StyleSheet, TextInput, TouchableOpacity, Button} from 'react- native';
import ActionSheet from 'react-native-actionsheet'
//----------------------------
showActionSheet = () => {
this.ActionSheet.show()
}
//----------------------------

TouchableOpacity.defaultProps = { activeOpacity: 0.8 };

const AppButton = ({ onPress, title }) => (
<TouchableOpacity onPress={onPress} style={styles.appContainer}>
<Text style={styles.appButtonText}>{title}</Text>
</TouchableOpacity>
); 


const forgotpassword = () => { 
return (
 <View> 

   <Text style={{fontSize: 20, color: '#000', fontWeight: '200', alignSelf: "center", marginTop: 70,}}> Forgot Password? </Text>
   <Text style={{fontSize: 15, color: '#B8B8B8', fontWeight: '100', marginLeft: 20, marginTop: 40,}}> Email address </Text> 
   <TextInput style={styles.inputpassword} secureTextEntry={true}/>
   <AppButton    
     title= 'Continue'
   />

   <View style={{fontSize: 20, fontWeight: '100', color: '#B8B8B8', alignSelf: "center", bottom: 90,}}>
   <Text onPress={this.showActionSheet}>Contact Support</Text>
    <ActionSheet
      ref={o => this.ActionSheet = o}
      title={'Which one do you like ?'}
      options={['Mail', 'Gmail', 'Outlook', 'Yahoo Mail', 'Cancel']}
      cancelButtonIndex={2}
      destructiveButtonIndex={1}
      onPress={(index) => { /* do something */ }} 
     />
     </View>

     </View>
   );
   };
export default forgotpassword;

const styles = StyleSheet.create({
inputpassword: {
  opacity: 0.5,
  width: "90%",
  borderWidth: 1,
  borderRadius: 10,
  padding: 7,
  marginBottom: 160,
  alignSelf: "center",
  borderColor: "#B8B8B8",
}, 

appContainer: {
  elevation: 8,
  width: "90%",
  backgroundColor: "#FABB51",
  alignSelf: "center",
  padding: 7,
  borderRadius: 10,
  paddingVertical: 10,
  bottom: 120,
  paddingHorizontal: 12,
  },

appButtonText: {
  fontSize: 18,
  color: "#fff",
  fontWeight: "bold",
  alignSelf: "center",

  },
});

Answer 1

將您的showActionSheet function 放在 forgotpassword 組件中，而不是this.ActionSheet ，使用useRef() ，如下所示：

   const actionSheet = useRef();
    const showActionSheet=()=>{
     actionSheet.current.show()
    }

並在您的 ActionSheet 上執行以下操作：

<ActionSheet ref={actionSheet} .../>

請使用 PascalCase 命名您的組件。