react native 跳转子页面 二级自页面在一级自页面的下面没有覆盖一级子页面

Question

怎么解决呀

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要实现React Native中一个二级页面（在这里我们称其为SubPage）嵌套到一个一级页面（这里称为MainPage），并且二级页面能够显示在其下方而不影响一级页面的内容，你需要使用FlatList来处理这个布局。以下是一个简单的示例：

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

const MainScreen = ({ navigation }) => {
  const [data, setData] = useState([
    { title: "5:30" },
    { title: "4" },
    { title: "←" },
    { title: "注册" }
  ]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Main Page</Text>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
        keyExtractor={(item) => item.title}
      />
      <Text style={styles.subtitle}>二级页面</Text>
      <SubPage navigation={navigation} />
    </View>
  );
};

const SubPage = (props) => {
  // 在此处处理二级页面的内容和行为
  return null;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  subtitle: {
    fontSize: 18,
  },
});

export default MainScreen;

在这个例子中，我们在MainScreen组件中创建了一个SubPage组件，并将其作为导航参数传递给它。这样，当用户从一级页面跳转到二级页面时，二级页面会自动加载并展示。

注意：为了确保二级页面可以正确地显示在其下方，你需要在二级页面的SubPage组件中实现一些逻辑，例如检查是否已经有一个二级页面加载了，如果有，则不需要再次请求数据，否则就请求数据并添加到数据列表中。