javascript - React Native，将函数分离到本地文件中

Question

我以我不满意的方式构建了这段代码。因为我认为我使用了很多行，我可以使它更短更整洁。我想从 App.js 文件中删除 SEARCH 函数并将其放在单独的本地文件中，以便稍后包含它。我想在 RENDER 函数之前包含它。我必须在这里使用什么将其作为组件或脚本导入？

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Button,
  Text,
  View,
  ScrollView,
  FlatList,
  ActivityIndicator,
  Image,
  Modal,
  TouchableOpacity,
} from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
      type_1: '#ddd',
      type_2: '#0078d4',
      type_3: '#0078d4',
      type_4: '#0078d4',
      year_1: '#ddd',
      year_2: '#0078d4',
      year_3: '#0078d4',
      year_4: '#0078d4',
      model_1: '#ddd',
      model_2: '#0078d4',
      model_3: '#0078d4',
      model_4: '#0078d4',
      type: 'Hyundai',
      year: '80-85',
      model: 'Seedan',
    };
  }

  componentDidMount() {
    this.setState(
      {
        isLoading: false,
      },
      function () {
        // In this block you can do something with new state.
      }
    );
  }
  search(type, data, color) {
    if (type == 'type') {
      this.setState({ type: data });
      switch (color) {
        case 'type_1':
          this.setState({ type_1: '#ddd' });
          this.setState({ type_2: '#0078d4' });
          this.setState({ type_3: '#0078d4' });
          this.setState({ type_4: '#0078d4' });
          break;
        case 'type_2':
          this.setState({ type_1: '#0078d4' });
          this.setState({ type_2: '#ddd' });
          this.setState({ type_3: '#0078d4' });
          this.setState({ type_4: '#0078d4' });
          break;
        case 'type_3':
          this.setState({ type_1: '#0078d4' });
          this.setState({ type_2: '#0078d4' });
          this.setState({ type_3: '#ddd' });
          this.setState({ type_4: '#0078d4' });
          break;
        case 'type_4':
          this.setState({ type_1: '#0078d4' });
          this.setState({ type_2: '#0078d4' });
          this.setState({ type_3: '#0078d4' });
          this.setState({ type_4: '#ddd' });
          break;
      }
    } else if (type == 'year') {
      this.setState({ year: data });
      switch (color) {
        case 'year_1':
          this.setState({ year_1: '#ddd' });
          this.setState({ year_2: '#0078d4' });
          this.setState({ year_3: '#0078d4' });
          this.setState({ year_4: '#0078d4' });
          break;
        case 'year_2':
          this.setState({ year_1: '#0078d4' });
          this.setState({ year_2: '#ddd' });
          this.setState({ year_3: '#0078d4' });
          this.setState({ year_4: '#0078d4' });
          break;
        case 'year_3':
          this.setState({ year_1: '#0078d4' });
          this.setState({ year_2: '#0078d4' });
          this.setState({ year_3: '#ddd' });
          this.setState({ year_4: '#0078d4' });
          break;
        case 'year_4':
          this.setState({ year_1: '#0078d4' });
          this.setState({ year_2: '#0078d4' });
          this.setState({ year_3: '#0078d4' });
          this.setState({ year_4: '#ddd' });
          break;
      }
    } else {
      this.setState({ model: data });
      switch (color) {
        case 'model_1':
          this.setState({ model_1: '#ddd' });
          this.setState({ model_2: '#0078d4' });
          this.setState({ model_3: '#0078d4' });
          this.setState({ model_4: '#0078d4' });
          break;
        case 'model_2':
          this.setState({ model_1: '#0078d4' });
          this.setState({ model_2: '#ddd' });
          this.setState({ model_3: '#0078d4' });
          this.setState({ model_4: '#0078d4' });
          break;
        case 'model_3':
          this.setState({ model_1: '#0078d4' });
          this.setState({ model_2: '#0078d4' });
          this.setState({ model_3: '#ddd' });
          this.setState({ model_4: '#0078d4' });
          break;
        case 'model_4':
          this.setState({ model_1: '#0078d4' });
          this.setState({ model_2: '#0078d4' });
          this.setState({ model_3: '#0078d4' });
          this.setState({ model_4: '#ddd' });
          break;
      }
    }
  }
  render() {
    if (this.state.isLoading) {
      return (
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" />
        </View>
      );
    }
    return (
      <View style={styles.MainContainer}>
        <View
          style={{
            backgroundColor: '#f8f8f8',
            height: 200,
            paddingTop: 30,
            justifyContent: 'center',
            alignItems: 'center',
            shadowColor: 'black',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.2,
            elevation: 2,
            position: 'relative',
          }}>
          <Text style={{ fontSize: 20 }}>Choose only on option each time:</Text>
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <TouchableOpacity
              onPress={() => {
                this.search('type', 'Hyundai', 'type_1');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.type_1 }]}>
                Hyundai
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('type', 'Mazda', 'type_2');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.type_2 }]}>
                Mazda
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('type', 'Toyota', 'type_3');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.type_3 }]}>
                Toyota
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('type', 'Nissan', 'type_4');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.type_4 }]}>
                Nissan
              </Text>
            </TouchableOpacity>
          </ScrollView>
          <ScrollView
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            style={styles.svBX}>
            <TouchableOpacity
              onPress={() => {
                this.search('year', '80-85', 'year_1');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.year_1 }]}>
                80-85
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('year', '90-95', 'year_2');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.year_2 }]}>
                90-95
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('year', '20-25', 'year_3');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.year_3 }]}>
                20-25
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('year', '70-75', 'year_4');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.year_4 }]}>
                70-75
              </Text>
            </TouchableOpacity>
          </ScrollView>
          <ScrollView
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            style={styles.svBX}>
            <TouchableOpacity
              onPress={() => {
                this.search('model', 'Seedan', 'model_1');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.model_1 }]}>
                Seedan
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('model', '4W', 'model_2');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.model_2 }]}>
                4W
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('model', '2Door', 'model_3');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.model_3 }]}>
                2Door
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.search('model', '5Door', 'model_4');
              }}>
              <Text
                style={[styles.btnSV, { backgroundColor: this.state.model_4 }]}>
                5Door
              </Text>
            </TouchableOpacity>
          </ScrollView>
        </View>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 20,
          }}>
          <Text style={styles.text}>{this.state.type}</Text>
          <Text style={styles.text}>{this.state.year}</Text>
          <Text style={styles.text}>{this.state.model}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    justifyContent: 'center',
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
  },
  btnSV: {
    fontSize: 18,
    width: 100,
    height: 30,
    margin: 3,
    padding: 3,
    borderRadius: 10,
  },
  svBX: {
    //flexDirection: 'row-reverse',
    margin: 3,
  },
  text: {
    justifyContent: 'center',
    border: '1px dotted #ddd',
    width: 100,
    height: 30,
    marginLeft: 10,
    textAlign: 'center',
    paddingTop: 5,
  },
});

标签： javascripthtmlreactjsreact-nativeimport