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

Question

我遵循了关于如何准确生成签名 apk 的 facebook 文档。但我仍然收到错误消息：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>
  );
 }
}

我想知道导致应用程序崩溃的上述 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 组件时使用 <Text/> from 'native-base'

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 Release，Debug apk 在物理设备中崩溃

React Native Relase, Debug apk crashes in physical devices

android

react-native

native-base