如何使用反应导航版本 5 进行嵌套导航，因为我在同一屏幕上也有 redux

Question

这里我想从 HomeFetchScreen 导航到设置屏幕，如果默认导出为 HomeToSettings，则 HomeFetchScreen 中的代码下方我的 Redux 无法连接。如何实现这种嵌套导航

这是我的主屏幕

import  HomeFetchScreen from './HomeFetchScreen';
const Home= () =>{
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))
return(
    
      <View>
        
            <Provider store={store}>
              <HomeFetchScreen/>
            </Provider>
          
      </View>
      </View>

  )  
  }

 export default Home;

这是我的 HomeFetchScreen 我在这里创建了 HomeToSettings 堆栈导航

const HomeFetchStack = createStackNavigator();
const HomeToSettings = () =>{
return(
    <HomeFetchStack .Navigator>
        <HomeFetchStack .Screen name='HomeFetchScreen' component={HomeFetchScreen} />
        <HomeFetchStack .Screen name='SettingsScreen' component={SettingsScreen} />
    </HomeFetchStack .Navigator>
);
}

const HomeFetchScreen = (props,{navigation}) =>{


return(
        <FlatList
            data={props.ShowNames}
            keyExtractor={(item,index)=> index.toString()}
           
            renderItem = {({item})=>
                        <TouchableOpacity onPress={()=>navigation.navigate('SettingsScreen')}>
                        <Card>                            
                            <View>
                                <Text>{item.name}</Text>                  
                            </View>
                        </Card>
                        </TouchableOpacity>
                    }
        >
        </FlatList>
        
    </View>
    

);
}
const mapStatetoProps = state =>{
return{
    ShowNames: state.ShowNames.list,
    

};
}

export default connect(mapStatetoProps,{ component}) (HomeToSettings);

Answer 1

如果你只在 HomeFetchScreen 中使用 redux，你可以这样做

可以在创建stack的时候做mapStatetoprops

const HomeFetchStack = createStackNavigator();
const HomeToSettings = () => {
    return (
        <HomeFetchStack.Navigator>
            <HomeFetchStack.Screen name='HomeFetchScreen' component={connect(mapStatetoProps, { component })(HomeFetchScreen)} />
            <HomeFetchStack.Screen name='SettingsScreen' component={SettingsScreen} />
        </HomeFetchStack.Navigator>
    );
}

const HomeFetchScreen = (props, { navigation }) => {

    return (
        <View>
            <FlatList
                data={props.ShowNames}
                keyExtractor={(item, index) => index.toString()}

                renderItem={({ item }) =>
                    <TouchableOpacity onPress={() => navigation.navigate('SettingsScreen')}>
                        <Card>
                            <View>
                                <Text>{item.name}</Text>
                            </View>
                        </Card>
                    </TouchableOpacity>
                }
            >
            </FlatList>
        </View>);
}
const mapStatetoProps = state => {
    return {
        ShowNames: state.ShowNames.list,
    };
}

export default HomeToSettings;