Question

我在使用React Native的iOS应用程序方面取得了一些进展，但又遇到了另一个问题。我正在尝试使用react-native-side-menu模块实现一个侧边菜单。有没有人对我有任何指示？我已经尝试将side-menu元素放在我的主渲染函数中但没有成功，在这种情况下我得到了一些警告。

任何指针都将受到高度赞赏！即使你有与我当前问题无关的提示，我也很乐意听到它！

编辑澄清一下，侧边菜单没有显示或似乎没有功能。或者我不知道如何打开它。

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

react-native-side-menu - 我做错了什么？

1 个答案: