Question

我在facebook文档中关于如何准确生成签名的apk。但我仍然收到错误：undefined is not an object (evaluating 'e.length' 这是屏幕截图

但是，该应用在Android模拟器中使用命令react-native run-android正常工作。但是，我遇到了导致应用程序崩溃的问题。那是native-base。以下是我的App.js中的以下代码：

import React, { Component } from 'react';
import {Text} from 'react-native';
import { Container, Header, Content, Form,Text, Item, Input, Label, Button } 
from 'native-base';
export default class ReactNativeExample extends Component {
constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: ''
    };
    this.doSignIn = this.doSignIn.bind(this);
}

doSignIn() {

let formdata = new FormData();
formdata.append("username", this.state.username)
formdata.append("password", this.state.password)

fetch('http://someweb.com/loginUser',{
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formdata
}).then((response) => response.json())
    .then((responseData) => {
         console.log("Inside responsejson");
         if(responseData.error != true) {
            console.log('You have logged in...');
         }
     }).done();
 }

render() {

return (
  <Container>
    <Header />
    <Content>
      <Form>
        <Item floatingLabel style={{margin: 8}}>
          <Label>Username</Label>
          <Input ref="username" onChangeText={(username) => 
          this.setState({username})}/>
        </Item>
        <Item floatingLabel last style={{margin: 8}}>
          <Label>Password</Label>
          <Input ref="username" onChangeText={(password) => 
          this.setState({password})}/>
        </Item>
         <Button block info style={{margin: 8}} onPress={this.doSignIn}>
        <Text>Login</Text>
      </Button>
      </Form>
    </Content>
  </Container>
  <Text> Hello </Text>
  );
 }
}

我想知道导致App崩溃的上述native-base代码出了什么问题？有什么方法可以使native-base代码有效吗？

谢谢。

ReactNative版本：0.50.1

Answer 1

尝试了你的代码。能够成功生成apk。在运行apk时没有发现任何问题。发布代码。

import React, { Component } from "react";
import { Container, Header, Content, Form, Text, Item, Input, Label,Button } from "native-base";
export default class ReactNativeExample extends Component {
constructor(props) {
  super(props);
  this.state = {
  username: "",
  password: "",
};
this.doSignIn = this.doSignIn.bind(this);
}
doSignIn() {
  let formdata = new FormData();
  formdata.append("username", this.state.username);
  formdata.append("password", this.state.password);

  fetch("https://httpbin.org/", {
    method: "post",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    body: formdata,
  })
    .then(response => console.log("response", response))
    .done();
}

render() {
  return (
    <Container>
      <Header />
      <Content>
        <Form>
          <Item floatingLabel style={{ margin: 8 }}>
            <Label>Username</Label>
            <Input ref="username" onChangeText={username => this.setState({ username })} />
          </Item>
          <Item floatingLabel last style={{ margin: 8 }}>
            <Label>Password</Label>
            <Input ref="username" onChangeText={password => this.setState({ password })} />
          </Item>
          <Button block info style={{ margin: 8 }} onPress={this.doSignIn}>
            <Text>Login</Text>
          </Button>
        </Form>
      </Content>
    </Container>
   );}
}

使用NativeBase组件时，请使用来自＆＃39; native-base＆＃39;

的<Text/>

Answer 2

那是因为Text组件的导入重复

import { Text } from 'react-native';
import { Container, Header, Content, Form,Text, Item, Input, Label, Button } 
from 'native-base';

您可以通过as这样导入两个文本组件

import { Text as NativeText } from 'react-native';

然后使用NativeText。否则，请勿复制您的导入。

React Native Relase，Debug apk在物理设备中崩溃

2 个答案: