react-native 应用程序在不同 cpu 架构中组装时表现不同

Question

我正在尝试构建一个社交媒体应用程序。在配置文件屏幕中，我有 Flatlist 来呈现信息。当我处于调试模式或正常导出模式（没有不同的 cpu 架构）时没问题，但是当我尝试导出时 assemble 当我们触摸时，具有不同架构 ap 的输出 apk 停止工作个人资料底部点击图标。您知道我们尝试导出和 assemble 发布 apk 时发生了什么吗？


/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useContext} from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  KeyboardAvoidingView,
  FlatList,
  RefreshControl,
  Text,
} from 'react-native';
import {Snackbar} from 'react-native-paper';

import jwtDecode from 'jwt-decode';
import Feather from 'react-native-vector-icons/dist/Feather';

import {AppScreen} from '../../Layouts';

import {
  AppProfileHeader,
  AppProfileBio,
  AppProfileBioContent,
  AppProfilePosts,
  AppProfileTopNavHeader,
  AppBioCallToActions,
  AppProfileStepsSlider,
} from '../../Containers';

import {
  AppInputContainer,
  AppText,
  ContactUserModal,
  AppButton,
  ProfileCommentsListModal,
  AppUserPostComment,
  AppCommentInput,
  AppPostUploaderBox,
} from '../../Components';

import {Colors, Fonts, ScreenSize} from '../../Constants';
import {ScrollView} from 'react-native-gesture-handler';
import {AppContext, AuthStorage} from '../../Services';
import {ProfileApis, SettingsApis} from '../../Services/Apis';

export default function ProfileScreen({navigation}) {
  const {
    user,
    setUser,
    setUserPosts,
    userPosts,
    setUserProfileInfo,
    userProfileInfo,
  } = useContext(AppContext);

  const restoreToken = async () => {
    const token = await AuthStorage.getToken();
    if (!token) {
      return;
    }
    const decodedToken = jwtDecode(token);
    setUser(decodedToken);
  };

  const [refreshing, setRefreshing] = useState(false);

  const [userCategoryType, setUserCategoryType] = useState();
  const [commentAccountText, setCommentAccountText] = useState('');
  const [accountCommentList, setAccountCommentList] = useState('');

  const [editUserConnectionInputs, setEditUserConnectionInputs] = useState(
    false,
  );

  const [contactUserInfo, setContactUserInfo] = useState({});
  const contactUserInfoTextChangeHandler = (key, text) => {
    setContactUserInfo((prev) => {
      return {
        ...prev,
        [key]: text,
      };
    });
  };

  const [snackbarVisible, setSnackbarVisible] = useState(false);
  const onDismissSnackBar = () => setSnackbarVisible(false);

  const [contactModalVisible, setContactModalVisible] = useState(false);
  const [profileCommentsVisible, setProfileCommentsVisible] = useState(false);
  const modalVisibilityHandler = () => {
    setContactModalVisible(!contactModalVisible);
  };

  const updateUserContactInfoHandler = async () => {
    try {
      const result = await SettingsApis.updateAccountDatum({
        datum: {...contactUserInfo},
      });
      if (result.data.status) {
        setEditUserConnectionInputs(false);
        modalVisibilityHandler();
        setSnackbarVisible(true);
      }
    } catch (error) {
      console.log("can't update user contactInfo", error.message);
    }
  };

  const profileCommentVisibilityHandler = () => {
    setProfileCommentsVisible(!profileCommentsVisible);
  };

  const topHeaderNavigationHandler = (route, param) => {
    navigation.navigate(route, param);
  };

  const imagePickerHandler = () => {
    navigation.jumpTo('CreatePost');
  };

  const fetchProfileInfo = async () => {
    if (await AuthStorage.getToken()) {
      try {
        const result = await ProfileApis.profileInfo({
          account: user.xdefaultaccount,
        });
        if (result.data.status) {
          setUserProfileInfo(result.data.datum);
          setContactUserInfo(result.data.datum);
          setRefreshing(false);
        }
      } catch (error) {
        console.log(error.message);
      }
    }
  };

  const fetchPosts = async () => {
    try {
      const result = await ProfileApis.getPosts({
        account: userProfileInfo.id,
      });

      if (result.data.status) {
        setUserPosts(result.data.datum);
      } else {
        console.log('fetch error');
      }
    } catch (error) {}
  };

  const updateStar = async (score) => {
    try {
      const result = await ProfileApis.updateStar({
        node: userProfileInfo.id,
        vote: score,
      });
      if (result.status) {
        fetchProfileInfo();
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  const getAccountComments = async () => {
    try {
      const result = await ProfileApis.getAccountComments({
        account: userProfileInfo.id,
      });
      if (result) {
        setAccountCommentList(result.data.datum);
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  const registerCommentAccount = async () => {
    try {
      const result = await ProfileApis.registerCommentAccount({
        node: userProfileInfo.id,
        content: commentAccountText,
      });

      if (result) {
        getAccountComments();
        setCommentAccountText('');
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  const registerCommentLike = async (id) => {
    try {
      const result = await ProfileApis.registerCommentLike({
        node: id,
      });
      if (result.data.status) {
        getAccountComments();
      }
    } catch (error) {
      console.log("can't register comment like", error.message);
    }
  };

  const followUser = async () => {
    try {
      const result = await ProfileApis.follow({
        node: userProfileInfo.id,
      });
      if (result) {
        console.log(result);
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  const updateStepHandler = async (step) => {
    let fetchedSteps = userProfileInfo.step;
    try {
      if (fetchedSteps) {
        fetchedSteps.splice(fetchedSteps.indexOf(step), 1);
      }
      const result = await SettingsApis.updateAccountStep({
        step: fetchedSteps,
      });
      if (result.data.status) {
        fetchProfileInfo();
      }
    } catch (error) {
      console.log("can't update account step", error.message);
    }
  };

  useEffect(() => {
    restoreToken();
  }, []);

  useEffect(() => {
    fetchProfileInfo();
  }, [user]);

  useEffect(() => {
    fetchPosts();
    getAccountComments();
    setUserCategoryType(userProfileInfo.category);
  }, [userProfileInfo]);

  return (
    <AppScreen style={styles.container}>
      <AppProfilePosts
        {...{
          refreshControl: (
            <RefreshControl refreshing={refreshing} onRefresh={restoreToken} />
          ),
          posts: userPosts,
          navigation,
          ListEmptyComponent: () => {
            return (
              <>
                <AppPostUploaderBox {...{imagePickerHandler}} />
              </>
            );
          },
          ListHeader: () => {
            return (
              <>
                <AppProfileTopNavHeader
                  {...{
                    navigation,
                    topHeaderNavigationHandler,
                    username: userProfileInfo.account,
                    userProfileInfo,
                    user,
                  }}
                />
                <AppProfileHeader
                  {...{fetchedProfileData: userProfileInfo, navigation}}
                />
                <AppProfileBio
                  {...{
                    fetchedProfileData: userProfileInfo,
                    updateStar,
                    navigation,
                  }}>
                  <AppProfileBioContent
                    {...{fetchedProfileData: userProfileInfo}}
                  />
                  <AppBioCallToActions
                    {...{
                      userProfileInfo,
                      user,
                      followUser,
                      modalVisibilityHandler,
                      profileCommentVisibilityHandler,
                    }}
                  />
                </AppProfileBio>
                {userCategoryType === 'personal' ? (
                  <AppProfileStepsSlider
                    {...{
                      avatarUri: userProfileInfo.avatar,
                      steps: userProfileInfo.step,
                      updateStepHandler,
                      fetchProfileInfo,
                    }}
                  />
                ) : null}
              </>
            );
          },
        }}
      />
      <ContactUserModal
        style={[styles.wrapperStyle]}
        {...{
          modalVisibilityHandler,
          isVisible: contactModalVisible,
        }}>
        <ScrollView>
          <View style={styles.contentWrapper}>
            <TouchableOpacity
              style={styles.closeButtonContainer}
              onPress={modalVisibilityHandler}>
              <Feather name="x" style={styles.closeIcon} />
            </TouchableOpacity>
            <View style={styles.titleContainer}>
              <AppText
                style={{
                  fontFamily: Fonts.iransansMedium,
                  fontSize: 16,
                  marginRight: 10,
                  textAlign: 'right',
                }}>
                {contactUserInfo.firstname} {contactUserInfo.lastname}
              </AppText>
              <AppText style={{padding: 8}}>
                {contactUserInfo.biography}
              </AppText>
            </View>
            <AppInputContainer
              onChangeText={(text) =>
                contactUserInfoTextChangeHandler('mobile', text)
              }
              editable={editUserConnectionInputs}
              value={contactUserInfo.mobile}
              placeholder="شماره موبایل"
              inputStyle={{
                textAlign: 'left',
                fontSize: 16,
                top: 2,
                color: '#838383',
              }}
              IconComponent={
                <AppText
                  style={{
                    fontFamily: Fonts.iransans,
                    fontSize: 16,
                    color: '#838383',
                  }}>
                  +98
                </AppText>
              }
            />
            <AppInputContainer
              onChangeText={(text) =>
                contactUserInfoTextChangeHandler('phone', text)
              }
              placeholder="تلفن ثابت"
              value={contactUserInfo.phone}
              editable={editUserConnectionInputs}
              inputStyle={{
                textAlign: 'left',
                fontSize: 16,
                top: 2,
                color: '#838383',
                paddingLeft: 20,
              }}
            />
            <AppInputContainer
              onChangeText={(text) =>
                contactUserInfoTextChangeHandler('webpage', text)
              }
              value={contactUserInfo.webpage}
              editable={editUserConnectionInputs}
              placeholder="وبسایت"
              inputStyle={{
                textAlign: 'left',
                paddingLeft: 15,
                fontSize: 16,
                top: 2,
                color: '#838383',
              }}
            />
            <AppInputContainer
              onChangeText={(text) =>
                contactUserInfoTextChangeHandler('province', text)
              }
              placeholder="استان"
              value={contactUserInfo.province}
              editable={editUserConnectionInputs}
              inputStyle={{
                fontSize: 14,
                top: 2,
                color: '#838383',
              }}
            />
            <AppInputContainer
              onChangeText={(text) =>
                contactUserInfoTextChangeHandler('city', text)
              }
              placeholder="شهر"
              value={contactUserInfo.city}
              editable={editUserConnectionInputs}
              inputStyle={{
                fontSize: 14,
                top: 2,
                color: '#838383',
              }}
            />
            <AppInputContainer
              onChangeText={(text) =>
                contactUserInfoTextChangeHandler('address', text)
              }
              value={contactUserInfo.address}
              editable={editUserConnectionInputs}
              placeholder="آدرس"
              inputStyle={{
                fontSize: 14,
                top: 2,
                color: '#838383',
              }}
            />
            {user.xaccount === userProfileInfo.id && (
              <View style={styles.buttonContainer}>
                {editUserConnectionInputs ? (
                  <AppButton
                    onPress={updateUserContactInfoHandler}
                    activeOpacity={0.7}
                    fontSize={16}
                    fontFamily={Fonts.iransansMedium}
                    textColor={Colors.primary_component_bg}
                    style={[styles.ctaButton, {backgroundColor: 'green'}]}>
                    ذخیره
                  </AppButton>
                ) : (
                  <AppButton
                    onPress={() =>
                      setEditUserConnectionInputs(!editUserConnectionInputs)
                    }
                    activeOpacity={0.7}
                    fontSize={16}
                    fontFamily={Fonts.iransansMedium}
                    textColor={Colors.primary_component_bg}
                    style={styles.ctaButton}>
                    ویرایش
                  </AppButton>
                )}
              </View>
            )}
          </View>
        </ScrollView>
      </ContactUserModal>
      <Snackbar
        duration={1500}
        style={{
          backgroundColor: 'green',
          padding: 0,
        }}
        visible={snackbarVisible}
        onDismiss={onDismissSnackBar}>
        <View
          style={{
            height: 20,
            width: ScreenSize.width - 50,
          }}>
          <Text style={{color: 'white'}}>اطلاعات با موفقیت به ثبت رسید</Text>
        </View>
      </Snackbar>
      <ProfileCommentsListModal
        {...{modalVisibilityHandler: profileCommentVisibilityHandler}}
        isVisible={profileCommentsVisible}>
        <KeyboardAvoidingView>
          <View style={[styles.contentWrapperProfileComments]}>
            <View style={{paddingBottom: 58}}>
              <FlatList
                ListEmptyComponent={<Text> nothing here </Text>}
                data={accountCommentList}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({item}) => {
                  return (
                    <AppUserPostComment {...{item, registerCommentLike}} />
                  );
                }}
              />
            </View>
            <AppCommentInput
              {...{
                registerCommentAccount,
                commentAccountText,
                setCommentAccountText,
              }}
            />
          </View>
        </KeyboardAvoidingView>
      </ProfileCommentsListModal>
    </AppScreen>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  contentWrapper: {
    height: ScreenSize.height,
    width: '100%',
    backgroundColor: 'white',
    borderRadius: 10,
  },
  contentWrapperProfileComments: {
    height: '100%',
    width: '100%',
    backgroundColor: 'white',
    borderRadius: 10,
  },
  closeButtonContainer: {
    height: 50,
    width: '100%',
    justifyContent: 'center',
  },
  closeIcon: {
    fontSize: 30,
    color: Colors.secondary_text,
    marginLeft: 10,
  },
  titleContainer: {
    padding: 5,
    marginBottom: 20,
  },
  buttonContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    width: '100%',
    bottom: 20,
  },
  ctaButton: {
    backgroundColor: Colors.primary_text,
    width: '90%',
    borderRadius: 4,
    height: 45,
  },
});

Answer 1

那么您可以添加来自 logcat 的结果吗？因为自关闭应用程序因为一些错误，比如组件无法完全渲染

react-native 应用程序在不同 cpu 架构中组装时表现不同

react-native app behaves diffrently when assembling it in different cpu architecture

react-native

react-native-android

react-native-flatlist

react-native-navigation