如何在 react-native 中使用嵌套路由

Question

我将 react-native-router-flux 用于我的应用程序主导航。我需要设置一个嵌套路由器。我有一个地图组件，它有一个带有区域列表的侧栏。当我单击一行时，我需要切换到一个包含属于该区域的细分列表的视图。我查看了一些示例并试图弄清楚。目前控制台中没有错误，但侧边栏中没有显示任何内容。如果有更好的方法，请告诉我。谢谢！

地图路由器

    export default class RootRouter extends Component {
    render() {
        return(
            <Router hideNavBar={true}>
                <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
                <Route name="mapSurveyTerritories" wrapRouter={false} component={MapSurveyTerritories} initial={true}/>
                <Route name="mapSubdivisions" wrapRouter={false} component={MapSubdivisions} />
            </Router>
        );
    }
}

Map Component

BackAndroid.addEventListener('hardwareBackPress', function() {
    Actions.pop();
    return true;
});
export default class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
            region: Albuquerque,
        };
    }


    render() {
        const { region, markers,surveyTerritories,selectedMarket } = this.state;
        return (
          <View style={styles.container}>
                    <Navbar
                        title="Map"/>

            <View style={styles.innerContainer}>
                <MapView
                    style={styles.map}
                    initialRegion={region}
                    onLongPress={this.onPress.bind(this)}>
                    {markers.map(marker => (
                        <MapView.Marker
                            ref="m1"
                            key={marker.id}
                            coordinate={marker.coordinate}
                            title={marker.name}>
                        </MapView.Marker>
                    ))}
                </MapView>
                <ScrollView style={styles.sidebarContainer}>

                    <MapRouter />
                </ScrollView>
            </View>
          </View>
        );
    }
};

module.exports = Map;

领土

class MapSurveyTerritories extends Component {
    constructor(props) {
        super(props);

        var ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 != r2
        });

        this.state = {
            dataSource: ds,
            showProgress: true
        };
    }

    componentDidMount() {
        this.fetchTerritories();
    }

    fetchTerritories() {
        this.setState({
            dataSource: this.state.dataSource
                .cloneWithRows(territoriesAlbuquerque),
            showSpinner: false
        });
    }

    renderRow(rowData) {
        return (
            <TouchableHighlight
                onPress={()=>Actions.mapSubdivisions({selectedTerritory:rowData})}
                underlayColor='#ddd'>
                <View style={styles.row}>
                    <View style={{paddingLeft: 20}}>
                        <Text>
                            <Text style={{ fontWeight: '600' }}> {rowData.properties.name} </Text>
                        </Text>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

    render() {
        return (
            <View style={{flex: 1,justifyContent: 'flex-start'}}>
<ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}/>
            </View>
        );
    }
}

module.exports = MapSurveyTerritories;

细分

class MapSubdivisions extends Component {
    constructor(props) {
        super(props);
var ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 != r2
        });
this.state = {
            dataSource: ds
        };
    }

    componentDidMount() {
        this.fetchSubdivisions();
    }

    fetchSubdivisions() {
        console.log('fetchSubdivisions', this.props.selectedTerritory);
        this.setState({
            dataSource: this.state.dataSource
                .cloneWithRows(subdivisionsAlbuquerque),
            showSpinner: false
        });
    }

    renderRow(rowData) {
        return (
            <TouchableHighlight
                onPress={()=>Actions.mapSubdivisionDetail({selectedSubdivision:rowData})}
                underlayColor='#ddd'>
                <View style={styles.row}>
                    <View style={{paddingLeft: 20}}>
                        <Text>
                            <Text style={{ fontWeight: '600' }}> {rowData.properties.name} </Text>
                        </Text>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

    render() {
         return (
            <View style={{flex: 1,justifyContent: 'flex-start'}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}/>
            </View>
        );
    }
}

module.exports = MapSubdivisions;

Answer 1

没错。

解决这个问题的最好方法是通过组件的 props 使用 Navigator - 因此，在这种情况下，如果您有一个 ListView 组件，您想将其移动到DetailedView 组件，只需调用 navigator.push (应该通过props传递给ListView）。

换句话说，您将 Navigator 传递给 ListView，在 this.props.navigator 上可用。然后（在 onPress 中），只需在导航器上调用 push，输入您想要渲染的下一个组件（以及您希望它拥有的任何其他道具）。

在这种情况下，我希望您的代码看起来像这样：

// Within the ListView component's 'onPress' event

this.props.navigator.push({
  component: DetailedView,
  location: this.props.location,
  // any other props you need to access inside DetailedView
});

希望这会有所帮助！