0

我正在使用 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",

  },
});
4

1 回答 1

0

将您的showActionSheet函数放在 forgotpassword 组件中，而不是this.ActionSheet,useRef()像这样使用：

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

并在您的 ActionSheet 上执行以下操作：

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

请使用 PascalCase 命名您的组件。

于 2022-02-02T20:34:42.800 回答