FlatList React-Native中带有TextInput的多值输入

如何解决FlatList React-Native中带有TextInput的多值输入

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="&#10006;" 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);