SelectProject.js 2.08 KB
/**
 * Created by yzdd on 2018/3/25.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  FlatList,
  TouchableOpacity
} from 'react-native';
import {line, publicStyle, width} from "../../utils/publiscStyle";
import SearchBox from "../../components/SearchBox";

const styles = StyleSheet.create({
  item: {
    width: width,
    height: 42,
    paddingLeft: 15
  },
  itemWrap: {
    width: width - 15,
    height: 42,
    flexDirection: "row",
    alignItems: "center",
    borderBottomWidth: line,
    borderBottomColor: "#eeeeee",

  },
  font1: {
    fontSize: 17,
    color: "#000000"
  }
});

const data = [
  {id: 1, name: "国发APP"},
  {id: 2, name: "新零售项目组"},
  {id: 3, name: "松鼠小邮局"},
  {id: 4, name: "饿了么办公"},
  {id: 5, name: "上海震旦"},
  {id: 6, name: "范飞"},
];

export default class SelectProject extends Component {

  static navigationOptions = ({navigation}) => {
    return {
      title: "选择项目"
    }
  };

  renderItem = (item, index) => {
    return <Item navigation={this.props.navigation} item={item} index={index}/>
  };

  render() {
    return (
      <View style={publicStyle.container}>
        <SearchBox
          icon
          searchConStyle={{backgroundColor: "#FFFFFF"}}
        />
        <FlatList
          contentContainerStyle={{backgroundColor: "#FFFFFF"}}
          data={data}
          renderItem={({item, index}) => this.renderItem(item, index)}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

class Item extends Component {
  selectProject = (item) => {
    const {addNoteStore} = this.props.navigation.state.params;
    const {goBack} = this.props.navigation;
    addNoteStore.projectName = item.name;
    console.log(addNoteStore)
    goBack();
  };

  render() {
    const {item} = this.props;
    return (
      <TouchableOpacity style={styles.item} onPress={() => this.selectProject(item)}>
        <View style={styles.itemWrap}>
          <Text style={styles.font1}>{item.name}</Text>
        </View>
      </TouchableOpacity>
    )
  }
}