react-native - React Native - Stack.Navigator 在博览会中不断加载我的第二个屏幕并且无法返回首页

Question

Stack.Navigator 一直在 expo 中加载我的第二个屏幕并且无法返回首页，这是我的导航器堆栈：

        import { StatusBar } from 'expo-status-bar';
    import React, {useState} from "react";
    import { StyleSheet, Text, View, Button, ScrollView, TouchableOpacity, FlatList, Icon, Image, TextInput } from 'react-native';

    import { NavigationContainer } from '@react-navigation/native';
    import { createNativeStackNavigator } from '@react-navigation/native-stack';
    const Stack = createNativeStackNavigator();
    import SearchScreen from './Components/SearchScreen'
    import HomeScreen from './Components/SearchScreen'


    export default class App extends React.Component {

    constructor(props){
      super(props);
    }


    render(){

      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="SUSH">
            <Stack.Screen
              name="SUSH"
              component={HomeScreen}
              options={({navigation})=>({
                headerRight: props => <TouchableOpacity style={{ marginRight: 20 }} onPress={() => navigation.navigate("Shopping") } >
                  
              
              
                <Image
                    style={{ width: 50, height: 50 }}
                    source={require('./assets/favicon.png')}
                />
              </TouchableOpacity>,
            })}
            />
            <Stack.Screen name="Shopping" component={SearchScreen} 
            />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }

    }



    import React, {useState} from "react";
    import { StyleSheet, Text, View, Button, ScrollView, TouchableOpacity, FlatList, Icon, Image, TextInput, } from 'react-native';
    const SearchScreen = ({navigation}) => {
        const [value, setValue] = useState("");
      
      
      
        React.useLayoutEffect(() => {
          navigation.setOptions({
            headerTitle: () => (null),
        headerLeft: () => (<TouchableOpacity                
          onPress={() => navigation.navigate("SUSH")}
      ><Text>Back</Text></TouchableOpacity>),
            headerRight: () => ( <TextInput style={{fontSize:16,width:305,padding:8, backgroundColor:'#e6e6e6',color:'black',}}  value={value}
                    onChangeText={(searchtext) => setValue(searchtext)}
                    
    value={value}
                      placeholder={"Search"} placeholderTextColor={'#454545'}></TextInput>
            ),
          });
        }, [navigation]);
      
      
      
      
          return <Text>This is {value}'s profile</Text>;
      
      
      };

      export default SearchScreen;



    import React, {useState} from "react";
    import { StyleSheet, Text, View, Button, ScrollView, TouchableOpacity, FlatList, Icon, Image, TextInput } from 'react-native';
    class HomeScreen extends React.Component{


        constructor(props){
          super(props);
          this.state = {
            data: [ {item: 'fsfsf', index: 0 },{item: 'fsfsf', index: 1 }],
          }
        }
        

        componentDidMount(){
            
            fetch("https://localhost:44379/Sush/GetShoppingItems/")
                .then((res) => {
                })
                .catch(() => {
                })   
        }
      

        _keyExtractor (item, index) {
          return index.toString();
        }
        
        _renderItem ({ item, index }) {
          return (
            <TouchableOpacity style={{width:'100%',}}>
        
        <View onStartShouldSetResponder={() => { this.props.navigation.navigate('Shopping', { name: 'Jane' }) }} style={{ 
            backgroundColor:'red', height:150, marginLeft:10, marginRight:10, marginBottom:10, marginTop:10 }}>
        
              </View>
            </TouchableOpacity>
              );
        }
        
        render(){
        
          return (
            <FlatList style={{ flex: 1, backgroundColor:'black', }}
                    data={this.state.data}
                    keyExtractor={this._keyExtractor.bind(this)}
                    renderItem={this._renderItem.bind(this)}
                    horizontal={false}
                  />
            
            
              );
        }
        };

        export default HomeScreen;

标签： react-nativereact-navigation