response-native-side-menu - Что я делаю неправильно?

Question

Я немного продвинулся в своем приложении iOS с React Native, но столкнулся с еще одной проблемой. Я пытаюсь реализовать боковое меню с помощью модуля «реакция-на-на-стороне». У кого-нибудь есть указатели на меня? Я попытался поместить элемент бокового меню в мою главную функцию рендеринга без успеха, и в этом случае я получаю некоторые предупреждения.

Любые указатели на всех были бы высоко оценены! Даже если у вас есть советы, не связанные с моей текущей проблемой, я бы с удовольствием это услышал!

Редактировать: Чтобы уточнить, боковое меню не отображается или не кажется функциональным. Либо это, либо я просто не знаю, как его открыть.

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Button, 
    Alert, 
    TextInput, 
    TouchableHighlight, 
    Image, 
    AlertIOS, 
    PickerIOS, 
    Animated, 
    Easing, 
    LayoutAnimation, 
    ScrollView, 
    Menu, 
    navigator, 
    ContentView, 
} from 'react-native'; 

var Keychain = require('react-native-keychain'); 
const SideMenu = require('react-native-side-menu'); 
//import SideMenu from 'react-native-side-menu'; 
//import Keychain from 'react-native-keychain'; 

var api_url = "http://www.myurl.com/api.php"; 

export default class mbab_franvaro extends Component { 

    constructor(props){ 
    super(props); 
    this.state = { 
     username: '', 
     password: '', 
     logged_in: false, 
     reason_selected: false, 
     length_selected: false, 
     report_approved: false, 
     loading: false, 
     opacity: 0, 
     function_selected: false, 
     credentials_loaded: false, 
     menu_width: 200, 
     sidemenu_is_open: false 
    }; 

    Keychain.getGenericPassword() 
     .then(function(credentials){ 
     fetch(api_url, { 
      method: "POST", 
      headers: { 
      'Accept': 'application/x-www-form-urlencoded', 
      'Content-Type': 'application/x-www-form-urlencoded', 
      }, 
      body: "username=" + this.state.username + "&password=" + this.state.password, 
     }) 
     .then((response) => response.json()) 
     .then((response) => { 
      this.fade_view(); 
      this.setState({loading: false}); 
      if(JSON.stringify(response.body).replace(new RegExp('"', 'g'), '').match("Inloggad")){ 
      this.username = credentials.username; 
      this.password = credentials.password; 
      this.fade_view(); 
      this.setState({logged_in: true, credentials_loaded: true}); 
      } 
     }) 
     .done(); 
     }) 
    } 

    componentWillMount() { 
    //Animate creation 
    LayoutAnimation.spring(); 
    } 

    fade_view(){ 
    LayoutAnimation.easeInEaseOut(); 
    if(this.state.opacity > 0){ 
     this.setState((state) => {opacity: 0}); 
    } 
    else{ 
     this.setState((state) => {opacity: 1}); 
    } 
    } 

    confirm_report(option){ 
    if(option === "send"){ 
     this.fade_view(); 
     this.setState({loading: true}); 
     this.loading_text = "Skickar.." 
     fetch(api_url, { 
     method: "POST", 
     headers: { 
      'Accept': 'application/x-www-form-urlencoded', 
      'Content-Type': 'application/x-www-form-urlencoded', 
     }, 
     body: "function=franvaro&username=" + this.state.username + "&password=" + this.state.password + "&length=" + this.length + "&reason=" + this.reason, 
     }) 
     .then((response) => response.json()) 
     .then((response) => { 
     this.fade_view(); 
     this.setState({loading: false}); 
     if(JSON.stringify(response.body).replace(new RegExp('"', 'g'), '').match("Mottaget")){ 
      this.fade_view(); 
      this.setState({report_approved: true}); 
      setTimeout(this.back_to_menu.bind(this), 5000); 
     } 
     else{ 
      AlertIOS.alert(
       "Fel", 
       JSON.stringify(response.body).replace(new RegExp('"', 'g'), '') 
     ); 
     } 
     }) 
     .catch((error) => { 
     AlertIOS.alert("error", error); 
     }) 
     .done(); 
    } 
    else{ 
     this.fade_view(); 
     this.setState({reason_selected: false, length_selected: false}); 
    } 
    } 

    check_franvaro_credentials(func){ 
     this.fade_view(); 
     this.setState({loading: true}); 
     this.loading_text = "Laddar.." 
     fetch(api_url, { 
     method: "POST", 
     headers: { 
      'Accept': 'application/x-www-form-urlencoded', 
      'Content-Type': 'application/x-www-form-urlencoded', 
     }, 
     body: "function=franvaro&username=" + this.state.username + "&password=" + this.state.password, 
     }) 
     .then((response) => response.json()) 
     .then((response) => { 
     try{ 
      if(JSON.stringify(response.body).replace(new RegExp('"', 'g'), '').match("INLOGGAD")){ 
      this.function = func; 
      this.fade_view(); 
      this.setState({function_selected: true, loading: false}); 
      } 
      else{ 
      AlertIOS.alert(
       "Fel", 
       JSON.stringify(response.body).replace(new RegExp('"', 'g'), '') 
      ); 
      this.fade_view(); 
      this.setState({loading: false}); 
      } 
     } 
     catch(e){ 
      Alert.alert("error", e.message); 
     } 
     }) 
     .catch((e) => { 
     console.warn(e); 
     }) 
     .done(); 
    } 

    select_function(func){ 
    this.fade_view(); 
    this.setState({loading: true}); 

    if(func === "franvaro"){ 
     this.check_franvaro_credentials(func); 
    } 
    } 

    select_reason(reason){ 
    this.reason = reason; 
    this.fade_view(); 
    this.setState({reason_selected: true}); 
    } 

    select_length(length){ 
    this.length = length; 
    this.fade_view(); 
    this.setState({length_selected: true}); 
    } 

    back_to_menu(){ 
    this.setState({function_selected: false}); 
    this.function = ""; 
    } 

    toggle_menu(){ 
    var show = false; 
    if(!this.state.sidemenu_is_open){ 
     show = true; 
    } 
    this.setState({sidemenu_is_open: show}); 
    console.warn(this.state.sidemenu_is_open); 
    /*LayoutAnimation.easeInEaseOut(); 
    if(this.state.menu_width > 0){ 
     this.setState({menu_width: 0}); 
    } 
    else{ 
     this.setState({menu_width: 200}); 
    }*/ 
    } 

    logout(){ 
    this.fade_view(); 
    this.setState({logged_in: false}); 
    this.username = ""; this.password = ""; this.reason = ""; this.length = ""; this.message2 = ""; this.function = ""; 
    this.setState({function_selected: false}); 
    } 

    login(){ 
    if(this.state.username === "" || this.state.password === ""){ 
     AlertIOS.alert("Fel", "Vänligen fyll i alla fält."); 
    } 
    else{ 
     this.fade_view(); 
     this.setState({loading: true}); 
     this.loading_text = "Loggar in.." 
     fetch(api_url, { 
     method: "POST", 
     headers: { 
      'Accept': 'application/x-www-form-urlencoded', 
      'Content-Type': 'application/x-www-form-urlencoded', 
     }, 
     body: "username=" + this.state.username + "&password=" + this.state.password, 
     }) 
     .then((response) => response.json()) 
     .then((response) => { 
     try{ 
      this.fade_view(); 
      this.setState({loading: false}); 
      if(JSON.stringify(response.body).replace(new RegExp('"', 'g'), '').match("INLOGGAD")){ 
      this.username = this.state.username; this.password = this.state.password; 
      this.fade_view(); 
      this.setState({logged_in: true}); 

      if(this.state.credentials_loaded === false){ 
       Keychain.setGenericPassword(this.username, this.password) 
      } 
      } 
      else{ 
      AlertIOS.alert(
       "Fel", 
       JSON.stringify(response.body).replace(new RegExp('"', 'g'), '') 
      ); 
      } 
     } 
     catch(e){ 
      Alert.alert("error", e.message); 
     } 
     }) 
     .catch((e) => { 
     console.warn(e); 
     }) 
     .done(); 
    } 
    } 



    render(){ 
    //const menu = <Menu navigator={navigator}/>; 

    if(this.state.loading){ 
     //laddar.. 
     return (
     <View style={{opacity: this.state.opacity}, styles.container}> 
      <Text style={styles.header}>{this.loading_text}</Text> 
     </View> 
    ); 
    } 

    /* 
    <SideMenu 
     isOpen={this.state.sidemenu_is_open} 
     //menu={menu} 
    > 
     <Text>fdsafsadf</Text> 
    </SideMenu> 
    */ 

    else if(this.state.function_selected === false && this.state.logged_in === false){ // ÄNDRA - TA BORT false 
     //menyn 
     return (
     <View style={{opacity: this.state.opacity}, styles.container}> 
      <View style={styles.notificationbar}></View> 

      <View style={styles.header_bar}> 
      <TouchableHighlight style={{backgroundColor: "pink"}} onclick={() => this.toggle_menu()}> 
       <Image resizeMode="center" style={styles.hamburger} source={require('./app/res/hamburger.png')} /> 
      </TouchableHighlight> 
      </View> 

      <ScrollView style={{opacity: this.state.opacity}, styles.scroll_container}> 
      <TouchableHighlight style={styles.button} onPress={() => this.toggle_menu() /*this.select_function("franvaro")*/}> 
       <Text style={styles.login_button_text}>Frånvarorapportering</Text> 
      </TouchableHighlight> 
      <TouchableHighlight style={styles.button} onPress={() => this.logout()}> 
       <Text style={styles.login_button_text}>Logga ut</Text> 
      </TouchableHighlight> 
      </ScrollView> 
     </View> 
    ); 
     /* 
     return (
     <View style={{opacity: this.state.opacity}, styles.container}> 
      <TouchableHighlight style={styles.button} onPress={() => this.select_function("franvaro")}> 
      <Text style={styles.login_button_text}>Frånvarorapportering</Text> 
      </TouchableHighlight> 
      <TouchableHighlight style={styles.button} onPress={() => this.logout()}> 
      <Text style={styles.login_button_text}>Logga ut</Text> 
      </TouchableHighlight> 
     </View> 
    ); 
     */ 
    } 


    else if(this.function === "franvaro" && this.state.logged_in){ 
     //frånvarorapportering 
     if(this.state.logged_in && this.state.reason_selected && this.state.length_selected && this.state.report_approved){ 
     //Tack! (klart) 
     return (
      <View style={{opacity: this.state.opacity}, styles.container}> 
      <Text style={styles.header}>Tack!</Text> 
      <Text style={styles.normal_text}>{this.message2}</Text> 
      </View> 
     ); 
     } 
     else if(this.state.logged_in && this.state.reason_selected && this.state.length_selected){ 
     if(this.reason === "sjuk"){ 
      var message = "Dina kollegor kommer bli meddelade att du är frånvarande i en " + this.length + " för att du är sjuk."; 
      this.message2 = "Krya på dig!"; 
     } 
     else if(this.reason === "semester"){ 
      var message = "Dina kollegor kommer bli meddelade att du är frånvarande i en " + this.length + " för att du är på semester."; 
      this.message2 = "Trevlig semester!"; 
     } 
     else if(this.reason === "vård av barn"){ 
      var message = "Dina kollegor kommer bli meddelade att du är frånvarande i en " + this.length + " för vård av barn."; 
      this.message2 = "Barnen är framtiden!"; 
     } 
     else if(this.reason === "föräldraledig"){ 
      var message = "Dina kollegor kommer bli meddelade att du är frånvarande i en " + this.length + " för att du är föräldraledig."; 
      this.message2 = "Barnen är framtiden!"; 
     } 
     else if(this.reason === "övrigt"){ 
      var message = "Dina kollegor kommer bli meddelade att du är frånvarande i en " + this.length + " av en olistad anledning."; 
      this.message2 = ""; 
     } 
     //Skicka eller börja om 
     return (
      <View style={{opacity: this.state.opacity}, styles.container}> 
      <Text style={styles.header}>Din rapport är redo!</Text> 
      <Text style={styles.normal_text}>{message}</Text> 

      <TouchableHighlight style={styles.button} onPress={() => this.confirm_report("send")}> 
       <Text style={styles.login_button_text}>Skicka</Text> 
      </TouchableHighlight> 

      <TouchableHighlight style={styles.button} onPress={() => this.confirm_report("reset")}> 
       <Text style={styles.login_button_text}>Börja om</Text> 
      </TouchableHighlight> 
      </View> 
     ); 
     } 
     else if(this.state.logged_in && !this.state.reason_selected){ 
     //Varför blir du frånvarande? 
     return (
      <View style={{opacity: this.state.opacity}, styles.container}> 
      <Text style={styles.header}>Varför blir du frånvarande?</Text> 

      <TouchableHighlight style={styles.button} onPress={() => this.select_reason("sjuk")}> 
       <Text style={styles.login_button_text}>Sjuk</Text> 
      </TouchableHighlight> 

      <TouchableHighlight style={styles.button} onPress={() => this.select_reason("semester")}> 
       <Text style={styles.login_button_text}>Semester</Text> 
      </TouchableHighlight> 

      <TouchableHighlight style={styles.button} onPress={() => this.select_reason("vård av barn")}> 
       <Text style={styles.login_button_text}>Vård av barn</Text> 
      </TouchableHighlight> 

      <TouchableHighlight style={styles.button} onPress={() => this.select_reason("föräldraledig")}> 
       <Text style={styles.login_button_text}>Föräldraledig</Text> 
      </TouchableHighlight> 

      <TouchableHighlight style={styles.button} onPress={() => this.select_reason("övrigt")}> 
       <Text style={styles.login_button_text}>Övrigt</Text> 
      </TouchableHighlight> 
      </View> 
     ); 
     } 
     else if(this.state.logged_in){ 
     //Hur länge blir du frånvarande? 
     return (
      <View style={{opacity: this.state.opacity}, styles.container}> 
      <Text style={styles.header}>Hur länge blir du frånvarande?</Text> 

      <TouchableHighlight style={styles.button} onPress={() => this.select_length("heldag")}> 
       <Text style={styles.login_button_text}>Heldag</Text> 
      </TouchableHighlight> 

      <TouchableHighlight style={styles.button} onPress={() => this.select_length("halvdag")}> 
       <Text style={styles.login_button_text}>Halvdag</Text> 
      </TouchableHighlight> 

      <TouchableHighlight style={styles.button} onPress={() => this.select_length("1/4 dag")}> 
       <Text style={styles.login_button_text}>1/4 dag</Text> 
      </TouchableHighlight> 
      </View> 
     ); 
     } 

    } 


    else{ 
     //inloggningssidan 
     return (
     <View style={{opacity: this.state.opacity}, styles.container}> 
      <Image resizeMode="center" style={styles.logo} source={require('./app/res/mbab_cmyk.png')} /> 
      <TextInput 
      placeholder="Namn" 
      autocorrect={false} 
      style={styles.text_box} 
      onChangeText={(username) => this.setState({username})} 
      returnKeyType="next" 
      onSubmitEditing={(event) => { 
       this.refs.password.focus(); 
      }} 
      /> 
      <TextInput 
      ref="password" 
      placeholder="Lösenord" 
      autocorrect={false} 
      secureTextEntry={true} 
      style={styles.text_box} 
      onChangeText={(password) => {this.setState({password})}} 
      returnKeyType="go" 
      /> 
      <TouchableHighlight style={styles.login_button} onPress={() => this.login()}> 
       <Text style={styles.login_button_text}>Logga in</Text> 
      </TouchableHighlight> 
     </View> 
    ); 
    } 


    } 
} 


class Application extends React.Component { 
    render() { 
    const menu = <Menu navigator={navigator}/>; 

    return (
     <SideMenu menu={menu}> 
     <ContentView/> 
     </SideMenu> 
    ); 
    } 
} 



const styles = StyleSheet.create({ 
    menu: { 
    width: 200, 
    alignSelf: 'stretch', 
    backgroundColor: '#003878', 
    flex: 1, 
    position: 'absolute', 
    top: 0, 
    bottom: 0, 
    marginTop: 77, 
    padding: 10, 
    }, 
    menu_button: { 
    alignSelf: 'stretch', 
    alignItems: 'center', 
    padding: 15, 
    marginLeft: -10, 
    marginRight: -10, 
    }, 
    menu_text: { 
    color: 'white' 
    }, 
    notificationbar: { 
    height: 22, 
    backgroundColor: "#0f4d8e", 
    alignSelf: 'stretch', 
    }, 
    header_bar: { 
    flex: 0, 
    height: 55, 
    justifyContent: 'center', 
    backgroundColor: "#003878", 
    padding: 10, 
    alignSelf: 'stretch' 
    }, 
    hamburger: { 

    }, 
    container: { 
    opacity: this.opacity, 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F4F4F4', 
    }, 
    scroll_container: { 
    opacity: this.opacity, 
    flex: 1, 
    //justifyContent: 'center', 
    //alignItems: 'center', 
    backgroundColor: '#F4F4F4', 
    alignSelf: 'stretch' 
    }, 
    report_wrapper: { 
    opacity: this.opacity, 
    flex: 1, 
    }, 
    button: { 
    opacity: this.opacity, 
    flex: 0, 
    flexDirection: "row", 
    justifyContent: "center", 
    alignItems: "center", 
    marginLeft: 10, 
    marginRight: 10, 
    marginTop: 30, 
    marginBottom: 2, 
    padding: 10, 
    backgroundColor: "#003878" 
    }, 
    login_button: { 
    opacity: this.opacity, 
    flex: 0, 
    flexDirection: "row", 
    justifyContent: "center", 
    alignItems: "center", 
    marginLeft: 10, 
    marginRight: 10, 
    marginTop: 2, 
    marginBottom: 2, 
    padding: 10, 
    backgroundColor: "#003878" 
    }, 
    login_button_text: { 
    opacity: this.opacity, 
    color: "white", 
    fontSize: 20, 
    flex: 1, 
    textAlign: "center", 
    }, 
    logo: { 
    opacity: this.opacity, 
    //flex: 1, 
    }, 
    text_box: { 
    opacity: this.opacity, 
    height: 40, 
    flex: 0, 
    backgroundColor: "white", 
    marginLeft: 10, 
    marginRight: 10, 
    marginTop: 2, 
    marginBottom: 2, 
    padding: 10 
    }, 
    header: { 
    opacity: this.opacity, 
    color: "#84754E", 
    fontSize: 25, 
    marginTop: 30, 
    }, 
    normal_text: { 
    opacity: this.opacity, 
    margin: 10 
    }, 
}); 

AppRegistry.registerComponent('mbab_franvaro',() => mbab_franvaro); 

Answer 1

Если это ваш index.js, просто удалите экспортное предложение. Он должен выглядеть следующим образом:

class mbab_franvaro extends Component { ... } 

Если это не ваш index.js, просто удалить AppRegistry предложение.

AppRegistry.registerComponent('mbab_franvaro',() => mbab_franvaro);