React native 将屏幕从平面列表项更改为该项'；s问题屏幕

我正在用react native开发一个英语应用程序。我创建了一个带有category和child_category的主页，如下所示 . 当我点击一个类别时，它会显示它的子类别。我做得很好。但现在我试着点击一个child_类别，它会变成这样一个问题屏幕。我尝试使用OnPress，但它不起作用。有解决办法吗？这是我的密码

这是Navigator.js

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Start">
        <Stack.Screen
          name="Start"
          component={Start}
          options={{
            headerShown: false,
            title: 'Homepage',
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign: 'center', // căn giữa stack navigator header
          }}
        />
        <Stack.Screen
          name="Login"
          component={Login}
          options={{
            title: 'Đăng nhập',
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign: 'center',
          }}
        />
        <Stack.Screen
          name="Signup"
          component={Signup}
          options={{
            title: 'Đăng ký',
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign: 'center',
          }}
        />
        <Stack.Screen
          name="ChangePass"
          component={ChangePass}
          options={{
            title: 'Cập nhật mật khẩu',
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign: 'center',
          }}
        />
        <Stack.Screen
          name="EditProfile"
          component={EditProfile}
          options={{
            title: 'Cập nhật thông tin tài khoản',
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign: 'center',
          }}
        />
        <Stack.Screen
          name="Home"
          component={TabSrceen}
          options={{
            headerShown: false,
            title: 'Welcome to MyEnglish',
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleStyle: {
              fontWeight: 'bold',
              alignSelf: 'center',
            },
          }}
        />

        <Stack.Screen
          name="ChildCategoryItem"
          component={ChildCategoryItem}
          options={{
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleStyle: {
              fontWeight: 'bold',
              alignSelf: 'center',
            },
          }}
        />

        <Stack.Screen
          name="Quiz"
          component={Quiz}
          options={{
            headerStyle: {
              backgroundColor: '#fff',
            },
            headerTitleStyle: {
              fontWeight: 'bold',
              alignSelf: 'center',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
export default AppNavigator;

const Home = () => {
  //render chủ đề con
  const renderChildCategoryItem = ({item}) => {
    return (
      <ChildCaterogyItem
        // CategoryName={data.find((x) => x.id == idSelected)}
        data_child={item}
      />
    );
  };

  //render chủ đề chính
  const renderCategoryItem = (item) => {
    return (
      <CategoryItem
        onSelected={onSelected}
        selected={item.id == idSelected}
        {...item}
        data={item}
      />
    );
  };

  const [data_child, setData_child] = useState([]);
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [idSelected, setIdSelected] = useState(1);

  const onSelected = (id) => {
    setIdSelected(id);
  };

  useEffect(() => {
    _fetchAllCategory();
    _fetchListChildCategory();
  }, [idSelected]);

  //fetch data chủ đề
  const _fetchAllCategory = async () => {
    try {
      const res = await fetch('http://192.168.1.4:8080/api/category', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      const data = await res.json();
      if (data.status == 200) {
        setData(data.data);
      }
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  //fetch data chủ đề con
  const _fetchListChildCategory = async () => {
    try {
      setLoading(true);
      const res = await fetch(
        'http://192.168.1.4:8080/api/childcategory/' + idSelected,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      const data = await res.json();
      if (data.status == 200) {
        setData_child(data.data);
      }
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <StatusBar barStyle="light-content" />
      <SafeAreaView style={styles.container}>
        <ScrollView style={styles.wrap} showsVerticalScrollIndicator={false}>
          <View style={styles.header}>
            <View style={styles.headerTitle}>
              <Text style={styles.heading}>
                An English learning app to improve your English vocabulary
              </Text>
            </View>
          </View>

          <View style={styles.listCategoryItem}>
            {data.map(renderCategoryItem)}
          </View>

          <View style={styles.listChildCategory}>
            <Text style={styles.listChildCategoryText}>
              Some categories for you
            </Text>

            <View style={styles.listCategory}>
              <FlatList
                data={data_child}
                // extraData={data_child}
                // keyExtractor ={(item)=> item.id}
                renderItem={renderChildCategoryItem}
              />
              
              {loading && (
                <View style={styles.loading}>
                  <ActivityIndicator size="large" color="#F1CB7A" />
                </View>
              )}
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

    export default class Questions extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      questions: [],
      current: 0,
      correctScore: 5,
      totalScore: 50,
      data: {
        score: 0,
        correctAnswers: 0
      },
      completed: false
    };
  }

  
  fetchQuestions = async () => {
    const {params} = this.props.navigation.state;
    await this.setState({ loading: true });
    const response = await fetch(
      `http://192.168.1.4:8080/api/question/`, + params.id,
      // + params,
      {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
    );
    const questions = await response.json();

    const { data } = questions;

    data.forEach(item => {
      item.id = Math.floor(Math.random() * 10000);
    });

    await this.setState({ questions: data, loading: false });
  };

---

你有没有试过在媒体上登录控制台，看看它是否被呼叫？我相信这可能是一个样式/方法问题，因为您试图将整个组件包装在可触摸的不透明中。尝试将可触摸不透明度改为视图，然后单击按钮导航到屏幕

如果这不起作用，您的导航功能可能不会通过道具传递。还要确保从react-native和not-react-native手势处理程序导入TouchableOpacity

---

编辑：您的按钮似乎使用了“props”，但您的包装器使用了“this.props”。您应该使用“props”，因为它是通过功能组件传递的，而不是基于类的组件。

导航器的设置如何？此外，功能组件有一个参数是道具，但您的子类别有2个参数，这似乎是错误的。功能组件中也没有

这个

。我尝试将child_类别的id传递给问题的url。您可以在我使用param.id的代码中看到。但我真的被困在这个案子里了。我刚刚发布了所有与child_category相关的内容。我试图通过控制台记录onpres，但它仍在工作。我也会从可触摸的不透明度改为查看，但我无法导航到测验屏幕onPress={（）=>this.props.navigation.navigate（'quick'，{id:item.id}）中的this'未定义。我不知道为什么我编辑过的答案“这”没有定义，因为你是通过道具传递的。那么我该如何解决这个问题呢？你有什么解决办法吗？删除“这个”并使用“props.navigation.navigate”代替。这只是一个评论。我只在按钮中使用props.navigation.navigate。它仍然不起作用。现在我有了这个错误（undefined不是一个对象（评估'props.navigation'））。

    export default class Questions extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      questions: [],
      current: 0,
      correctScore: 5,
      totalScore: 50,
      data: {
        score: 0,
        correctAnswers: 0
      },
      completed: false
    };
  }

  
  fetchQuestions = async () => {
    const {params} = this.props.navigation.state;
    await this.setState({ loading: true });
    const response = await fetch(
      `http://192.168.1.4:8080/api/question/`, + params.id,
      // + params,
      {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
    );
    const questions = await response.json();

    const { data } = questions;

    data.forEach(item => {
      item.id = Math.floor(Math.random() * 10000);
    });

    await this.setState({ questions: data, loading: false });
  };