Боковое меню (.tsx), реагирует родное - PullRequest
Новая
       12

Боковое меню (.tsx), реагирует родное

0 голосов
/ 18 февраля 2019

Я пытаюсь сделать меню на реагирующем языке, и это дает мне эту ошибку, код, который копируется из 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,
  }
});

sry для английского

1 Ответ

0 голосов
/ 18 февраля 2019

Похоже, что constructor не имеет закрывающего } до объявления функции toggle.

Изменение: 

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
    });
  }
...