侧边菜单 (.tsx)，反应本机

Question

我正在尝试在 react-native 中制作一个菜单，它给了我这个错误，代码是从 JavaScript 复制的，我想在 tsx

中传递它

错误： c:\proyectosreactjs\kapua\src\Screens\Discover.tsx: c:/proyectosreactjs/kapua/src/Screens/Discover.tsx (39,13): ';'预期。

我不认为这是因为“;”如果不是因为原始代码来自 javaScript 我将它传递给 typeScript

import React from 'react';
import {
  StyleSheet,
  Image,
  Text,
  View,
  Dimensions,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native';
import { BackgroundGradient } from '../Components/BackgroundGradient';
import { List } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import Sidemenu from 'react-native-side-menu';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

interface Props {
  navigation: any;
}

interface State {}

export class Discover extends React.Component<Props, State> {
  private images = [
    { image: require('../../assets/images/img0.jpg'), link: 'DetailScreen' },
    { image: require('../../assets/images/img1.jpg'), link: 'DetailScreen' },
    { image: require('../../assets/images/img2.jpg'), link: 'DetailScreen' },
    { image: require('../../assets/images/img3.jpg'), link: 'DetailScreen' },
    { image: require('../../assets/images/img4.jpg'), link: 'DetailScreen' }
  ];
  constructor(props: Props) {
    super(props);
    this.state = {
      isOpen: false
    }
    toggle(){
      this.setState({
        isOpen: !this.state.isOpen
      })  
    }
    ;
  }

  updateMenu(isOpen){
    this.setState({isOpen})
  }
  
  render() {
    return (

      <View style={styles.root}>
        <Sidemenu
          menu={}
          isOpen={this.state.isOpen}
          onChange={(isOpen) =>this.updateMenu(isOpen)}
        >
          <BackgroundGradient colors={['#142246', '#B634C5']} />
          <View style={styles.header}>
              <TouchableWithoutFeedback onPress={() => props.toggle()}>
                <Icon
                  name="bars"
                  color="white"
                  size={30}
                />
              </TouchableWithoutFeedback>
              <Icon
                  name="search"
                  color="white"
                  size={30}
                />
              
          </View>
          <List
            style={{ marginTop: 20 }}
            dataArray={this.images}
            renderRow={(data) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    this.props.navigation.navigate(data.link);
                  }}>
                  <Image
                    source={data.image}
                    style={{
                      width: width - 20,
                      height: 200,
                      alignSelf: 'center',
                      marginBottom: 20
                    }}
                    resizeMethod='resize'
                    resizeMode='contain'
                  />
                </TouchableOpacity>
              );
            }}
          />
        </Sidemenu>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    width: width,
    height: height
  },

  header: {
    width: width, 
    height: 60, 
    marginTop:30,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
    //marginLeft: 10,
    //marginRight: 10,
  }
});

对不起英语

Answer 1

在您声明 toggle 函数之前，constructor 似乎没有结尾 }。

变化：

constructor(props: Props) {
    super(props);
    this.state = {
      isOpen: false
    }
    toggle(){
      this.setState({
        isOpen: !this.state.isOpen
      })  
    }
    ;
  }

收件人：

constructor(props: Props) {
    super(props);
    this.state = {
      isOpen: false
    }
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

侧边菜单 (.tsx)，反应本机

Side menu (.tsx), react native

typescript

react-native

tsx