基于React-Native的APK在我的手机上崩溃

所以我在Udemy上做了一个基本的反应本机课程（没有教师的回应）。第一项任务是制作一份“待办事项”清单，我做了。按照此页面上的所有说明： https://facebook.github.io/react-native/docs/signed-apk-android.html 成功构建，我的应用程序在安装后启动，但当我按输入字段时，它只是崩溃。任何想法可能是错的？这是我的代码，即使我敢肯定这个问题是在别处：基于React-Native的APK在我的手机上崩溃

import React, {Component} from 'react'; 
import { 
    StyleSheet, 
    Text, 
    TextInput, 
    View, 
    TouchableOpacity, 
    ScrollView, 
    AsyncStorage 
} from 'react-native'; 

const Main = React.createClass({ 
    getInitialState() { 
return ({ 
tasks: [], 
completedTasks:[], 
task:'' 
}) 
    }, 

componentWillMount() { 
AsyncStorage.getItem('tasks') 
.then((response) => { 
    this.setState ({tasks: JSON.parse(response)}) 
}); 
AsyncStorage.getItem('completedTasks') 
.then((response) => { 
    this.setState({completedTasks: JSON.parse(response)}) 
}); 
    }, 

componentDidUpdate() { 
    this.setStorage(); 
}, 

setStorage() { 
    AsyncStorage.setItem('tasks', JSON.stringify(this.state.tasks)); 
    AsyncStorage.setItem('completedTasks', JSON.stringify(this.state.completedTasks)); 

    }, 

    renderList(tasks){ 
return(
    tasks.map((task, index) =>{ 
    return(
    <View key={task} style={styles.task}> 
     <Text> 
     {task} 
     </Text> 
     <TouchableOpacity 
     onPress={()=>this.completeTask(index)} 
     > 
     <Text> 
      &#10003; 
      </Text> 
      </TouchableOpacity> 
     </View> 
    ) 
    }) 
) 
    }, 
    renderCompleted(tasks) { 
return (
    tasks.map((task, index) => { 
    return(
     <View key={task} style={styles.task}> 
     <Text style={styles.completed}> 
      {task} 
      </Text> 
      <TouchableOpacity 
      onPress={()=>this.deleteTask(index)} 
      > 
      <Text> 
       &#10005; 
       </Text> 
      </TouchableOpacity> 
      </View> 
    ) 
    }) 
) 
    }, 

deleteTask(index){ 
    let completedTasks = this.state.completedTasks; 
    completedTasks = completedTasks.slice(0, index).concat(completedTasks.slice(index+1)); 
    this.setState({completedTasks}); 
}, 

completeTask(index) { 
let tasks = this.state.tasks; 
tasks = tasks.slice(0, index).concat(tasks.slice(index+1)); 

let completedTasks = this.state.completedTasks; 
completedTasks = completedTasks.concat([this.state.tasks[index]]); 

this.setState({ 
    tasks, 
    completedTasks 
}); 


    }, 
    addTask() { 
    let tasks = this.state.tasks.concat([this.state.task]); 
    this.setState({tasks}) 

    }, 
    render() { 
    return (
    <View style={styles.container}> 
     <Text style={styles.header}> 
     Muli's To-Do 
      </Text> 
      <TextInput underlineColorAndroid={'transparent'} 
      style={styles.input} 
      onChangeText={(text) => { 
       this.setState({task: text}); 
      } } 
      onEndEditing={()=> this.addTask()} 
      /> 
      <ScrollView> 
{this.renderList(this.state.tasks)} 
      {this.renderCompleted(this.state.completedTasks)} 
       </ScrollView> 

      </View> 
    ) 
    } 
}) 

const styles = StyleSheet.create({ 
container: { 
    flex:1, 
    backgroundColor: '#3b5998' 

}, 
header: { 
color:'white', 
margin: 0, 
marginTop:10, 
textAlign: 'center', 
fontSize: 18 

}, 
task: { 
    elevation:5, 
    backgroundColor:'white', 
    flexDirection: 'row', 
    height: 60, 
    borderWidth:1, 
    borderColor: 'black', 
    justifyContent:'space-between', 
    alignItems:'center', 
    padding: 20, 
    margin: 2, 
    borderRadius: 5, 
}, 
input: { 
    elevation:10, 
    backgroundColor:'white', 
    height: 60, 
    borderWidth:1, 
    borderBottomWidth: 1, 
    borderRadius: 5, 
    borderColor:'black', 
    textAlign: 'center', 
    margin:10, 
    marginBottom:30, 
    fontSize:15, 
    color: '#3b5998', 
}, 
completed: { 
    color: '#555', 
    textDecorationLine: 'line-through' 
} 
}) 

module.exports = Main;

请让我知道其他的相关信息，我可以提供。

谢谢！

来源

2017-06-14 Muli Cohen

这是一种释放模式？ – Codesingh

@Codesingh对不起，但你是什么意思？ –

你生成了一个已签名的apk吗？ – Codesingh

看起来在componentWillMount期间，您将tasks和completedTasks设置为未定义的状态。在全新设置中，您的存储空间将为空，并且对于任务和completedTasks的响应都将不确定。

您可以快速检查调整componentWillMount如果响应存在，就像这样：

componentWillMount() { 
    AsyncStorage.getItem('tasks') 
     .then((response) => { 
     if (response) { 
      this.setState({tasks: JSON.parse(response)}) 
     } 
     }); 
    AsyncStorage.getItem('completedTasks') 
     .then((response) => { 
     if (response) { 
      this.setState({completedTasks: JSON.parse(response)}) 
     } 
     }); 
    },

来源

2017-06-14 09:13:51 Siwananda

谢谢，我明白你的意思了！但这可能是应用程序崩溃在我的设备上的原因？ –

是的，原因是，一旦你开始输入，状态就会更新，组件将尝试重新渲染。在重新渲染时，调用renderList（tasks）方法，然后依次运行下面的代码：tasks.map（（task，index）=> {'。这会导致错误，因为您尝试调用map功能在一个空对象 – Siwananda

好的，这是有道理的，所以我会用你的修补程序编辑它，然后回发，谢谢！ –

基于React-Native的APK在我的手机上崩溃

回答

相关问题