问题描述
Hoi,我使用Expo和React Native创建了我的第一个应用程序。该应用程序包含带有AsyncStorage和输入的简单Flatlist。
用户可以添加一个域,该域将写入FlatList并打开onClick。现在,我想添加用于为此域设置别名的选项,例如列表中的“搜索引擎”,其值为google.de。
为“别名”添加第二个输入的最佳实践是什么?这两个值都应写为一项任务。列表中的别名,背景中的URL。
这是我的代码(此刻列表将显示google.de而不是搜索引擎:
import React,{ Component } from "react";
import { AppRegistry,StyleSheet,Text,View,FlatList,AsyncStorage,Button,TextInput,Keyboard,Platform,TouchableOpacity,BackHandler } from "react-native";
import * as Linking from 'expo-linking';
import { WebView } from 'react-native-webview';
const isAndroid = Platform.OS == "android";
const viewPadding = 10;
export default class NodeList extends Component {
constructor(props) {
super(props);
this.WEBVIEW_REF = React.createRef();
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress',this.handleBackButton);
}
componentwillUnmount() {
BackHandler.removeEventListener('hardwareBackPress',this.handleBackButton);
}
handleBackButton = ()=>{
this.WEBVIEW_REF.current.goBack();
return true;
}
onNavigationStateChange(navstate) {
this.setState({
canGoBack: navstate.canGoBack
});
}
state = {
tasks: [ ],text: ""
};
changeTextHandler = text => {
this.setState({ text: text });
};
addTask = () => {
let notEmpty = this.state.text.trim().length > 0;
if (notEmpty) {
this.setState(
prevstate => {
let { tasks,text } = prevstate;
return {
tasks: tasks.concat({ key: tasks.length,text: text }),text: ""
};
},() => Tasks.save(this.state.tasks)
);
}
};
deleteTask = i => {
this.setState(
prevstate => {
let tasks = prevstate.tasks.slice();
tasks.splice(i,1);
return { tasks: tasks };
},() => Tasks.save(this.state.tasks)
);
};
componentDidMount() {
Keyboard.addListener(
isAndroid ? "keyboardDidShow" : "keyboardWillShow",e => this.setState({ viewMargin: e.endCoordinates.height + viewPadding })
);
Keyboard.addListener(
isAndroid ? "keyboardDidHide" : "keyboardWillHide",() => this.setState({ viewMargin: viewPadding })
);
Tasks.all(tasks => this.setState({ tasks: tasks || [] }));
}
render() {
return (
<View
style={[styles.container,{ paddingBottom: this.state.viewMargin }]}
>
<Text style={styles.appTitle}>Nodes</Text>
<FlatList
style={styles.list}
data={this.state.tasks}
renderItem={({ item,index }) =>
<View>
<View style={styles.listItemCont}>
<TouchableOpacity onPress={() => {Linking.openURL(`https://${item.text}`)}}>
<Text style={styles.listItem}>
{item.text}
</Text>
</TouchableOpacity>
<Button color= "#00BC8C" title="✖" onPress={() => this.deleteTask(index)} />
</View>
<View style={styles.hr} />
</View>}
/>
<TextInput
style={styles.textInput}
onChangeText={this.changeTextHandler}
onSubmitEditing={this.addTask}
value={this.state.text}
placeholder="+ add Node"
returnKeyType="done"
returnKeyLabel="done"
/>
</View>
);
}
}
let Tasks = {
convertToArrayOfObject(tasks,callback) {
return callback(
tasks ? tasks.split("||").map((task,i) => ({ key: i,text: task,url: task })) : []
);
},convertToStringWithSeparators(tasks) {
return tasks.map(task => task.text).join("||");
},all(callback) {
return AsyncStorage.getItem("TASKS",(err,tasks) =>
this.convertToArrayOfObject(tasks,callback)
);
},save(tasks) {
AsyncStorage.setItem("TASKS",this.convertToStringWithSeparators(tasks));
}
};
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: "center",alignItems: "center",backgroundColor: "#252525",padding: viewPadding,paddingTop: 24
},list: {
width: "100%"
},listItem: {
paddingTop: 4,paddingBottom: 2,fontSize: 18,color:"#ffff"
},hr: {
height: 1,backgroundColor: "gray"
},listItemCont: {
flexDirection: "row",justifyContent: "space-between",paddingTop: 10,},textInput: {
height: 40,paddingRight: 10,paddingLeft: 10,borderColor: "gray",borderWidth: isAndroid ? 0 : 1,width: "100%",appTitle: {
alignItems:"center",paddingBottom: 45,marginTop: 50,fontSize: 25,color:"#ffff"
}
});
AppRegistry.registerComponent("NodeList",() => NodeList);
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)