React Native切换View内容失败：点击按钮应用无报错闪退求助

1. 函数名拼写错误（直接导致闪退） #

你的TouchableOpacity的onPress里调用了handleChagnStaceMyView()，但实际定义的切换函数是handleChangeMyView，拼写错误触发了未定义函数的致命错误，直接导致应用闪退。

2. 组件渲染方式错误 #

你将组件函数存在useState中，但直接写{MyDynamicViewArea}无法正确渲染组件，必须以JSX元素的形式渲染：<MyDynamicViewArea />。

3. 缺失必要的导入与样式定义 #

• 未导入FontAwesome图标组件，需要从@expo/vector-icons或react-native-vector-icons库中导入；
• 未定义styles对象，使用StyleSheet.create创建样式才能正常使用styles.siteContainer这类样式属性。

修正后的完整代码 #

SiteContainer.js

import React, { useState } from 'react';
import { SafeAreaView, View, TouchableOpacity, StyleSheet } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome'; // 根据你的图标库调整导入路径
import MyInitialView from './MyInitialView';

const SiteContainer = () => {
  const MyDynamicView = () => {
    return (
      <View style={styles.dynamicView}></View>
    );
  };

  const [CurrentView, setCurrentView] = useState(MyInitialView);

  const handleChangeMyView = () => {
    setCurrentView(MyDynamicView);
  };

  return (
    <SafeAreaView style={styles.siteContainer}>
      {/* 以JSX元素形式渲染当前组件 */}
      <CurrentView />
      <TouchableOpacity onPress={handleChangeMyView} style={styles.toggleButton}>
        <FontAwesome name="quote-left" size={24} color="black" />
      </TouchableOpacity>
    </SafeAreaView>
  );
};

// 定义样式
const styles = StyleSheet.create({
  siteContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  dynamicView: {
    width: 200,
    height: 200,
    backgroundColor: 'lightblue',
    marginBottom: 20,
  },
  toggleButton: {
    padding: 10,
    backgroundColor: '#eee',
    borderRadius: 5,
  },
});

export default SiteContainer;

MyInitialView.js

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default function MyInitialView() {
  return (
    <View style={styles.initialView}></View>
  );
}

const styles = StyleSheet.create({
  initialView: {
    width: 200,
    height: 200,
    backgroundColor: 'lightgreen',
    marginBottom: 20,
  },
});

内容的提问来源于stack exchange，提问作者Program-Me-Rev