tiefen_space_app/screeens/SpaceSetting/SpaceIntroSetting/index.jsx

import {
  View,
  Text,
  ScrollView,
  ActivityIndicator,
  TextInput,
  TouchableOpacity,
} from "react-native";
import React, { useState } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Toast from "react-native-toast-message";
import baseRequest from "../../../utils/baseRequest";
import { generateSignature } from "../../../utils/crypto";
import { Button, Divider, CheckBox, Switch, Icon } from "@rneui/themed";
import MyDivider from "../../../components/MyDivider";

export default function SpaceIntroSetting({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  const data = route.params.data;

  const [isSubmitting, setIsSubmitting] = useState(false);

  //空间介绍
  const [spaceIntro, setSpaceIntro] = useState(data.profile);

  const handleSubmit = async () => {
    if (!spaceIntro) {
      Toast.show({
        type: "error",
        text1: "请完善内容后提交",
        topOffset: 60,
      });
      return;
    }

    if (isSubmitting) return;
    setIsSubmitting(true);

    const apiUrl = process.env.EXPO_PUBLIC_API_URL;

    try {
      const base = await baseRequest();
      const body = {
        id: data.id,
        profile: spaceIntro,
        ...base,
      };
      const signature = await generateSignature(body);
      const _response = await fetch(
        `${apiUrl}/api/zone/update?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(body),
        }
      );
      const _data = await _response.json();
      if (_data.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data.msg,
          topOffset: 60,
        });
        return;
      }
      Toast.show({
        type: "success",
        text1: "修改成功，请重进空间刷新查看",
        topOffset: 60,
      });
      navigation.goBack();
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <ScrollView
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <View style={tailwind("flex-1 p-4")}>
        <Text style={tailwind("text-base font-medium text-white")}>
          <Text style={tailwind("text-[#F53030]")}>*</Text>空间介绍
        </Text>
        <TextInput
          value={spaceIntro}
          onChangeText={(value) => setSpaceIntro(value)}
          placeholder="介绍下你的空间吧～"
          placeholderTextColor="#FFFFFF80"
          underlineColorAndroid="transparent"
          multiline
          textAlignVertical="top"
          style={tailwind(
            "h-32 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
          )}
        />
        <TouchableOpacity
          onPress={() => navigation.navigate("EditStreamerMedia")}
          style={tailwind("flex-row justify-between pt-4 pb-2")}
        >
          <Text style={tailwind("text-base text-white")}>
            <Text style={tailwind("text-[#F53030]")}>*</Text>
            封面、相册、视频设置
          </Text>
          <Icon name="chevron-forward-outline" type="ionicon" color="white" />
        </TouchableOpacity>
        <MyDivider />
        <Button
          color="#FF669E"
          radius="999"
          size="md"
          disabled={isSubmitting}
          disabledStyle={tailwind("bg-[#FFFFFF80]")}
          disabledTitleStyle={tailwind("text-white")}
          onPress={handleSubmit}
          titleStyle={tailwind("text-base")}
          containerStyle={tailwind("mt-16")}
        >
          {isSubmitting && <ActivityIndicator size="small" color="white" />}
          {isSubmitting ? "正在保存..." : "保存设置"}
        </Button>
      </View>
    </ScrollView>
  );
}