创建导航时屏幕重复

Question

我创建了一个expo项目，现在需要在屏幕之间创建导航。我在项目中添加了以下几行：

App.js

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends Component {
  state = {

  };

  render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
          <AppContainer />
        </View>
      </Provider>
    );
  }
}

HomeScreen的渲染功能：

<TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('DetailInfoScreen');
              console.log('Pressed');
            }
            }
          >

当我运行项目时，我会遇到这种情况：

如您所见，屏幕将复制其信息。那是什么原因呢？