Javascript 移动到React Native中的选定页面

我有一个堆栈导航器，如下所示：

const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Profile: {screen: ProfileScreen},
  Page1: {screen: Page1},
  Page2: {screen: Page2},
  Page3: {screen: Page3},
  Page4: {screen: Page4},
  Page5: {screen, Page5},
});

const App = createAppContainer(MainNavigator);

export default App;

在主屏幕中，我通过单击按钮转到ProfileScreen：

class HomeScreen extends React.Component {
    render() {
      const {navigate} = this.props.navigation;
      return (
        <Fragment>
        <Button
          title="Go to Jane's profile"
          onPress={() => navigate('Profile', {name: 'Jane'})}
        />
        </Fragment>
      );
    }
  }

在ProfileScreen上，我想在列表中选择一些自定义页面，例如Page1、Page3和Page4。然后使用ProfileScreen上的“下一步”按钮，我想转到第1页。使用第1页上的“下一步”按钮，我想进入下一个选定的页面，第3页。然后使用第3页上的“下一步”按钮，我想进入下一个选定的页面，第4页

如何在React native中实现此功能？

React navigation允许您在执行导航时传递参数：

在您的情况下，可以这样做：

类ProfileScreen扩展了React.Component{ 状态={ selectedScreen:“第3页”， nextSelectedScreen:'Page4'//您可以实现自己的逻辑，为选定屏幕和下一个选定屏幕选择列表 } 渲染{ const{navigate}=this.props.navigation； 回来 导航this.state.selectedScreen，{nextSelectedScreen:this.state.nextSelectedScreen} /> ; } } 然后在屏幕3或屏幕4中，您可以执行以下操作：

Screen3类扩展了React.Component{//逻辑与Screen4类似 渲染{ const{navigate，getParam}=this.props.navigation； 回来 navigategetParam'nextSelectedScreen'}//在ProfileScreen上传递了键nextSelectedScreen /> ; } }

---

如前所述，react navigation允许您在进行导航时传递参数

这是ProfileScreen页面。在这里，您可以设置页面选择UI和其他导航。我试着用评论来解释它。希望能有帮助

class ProfileScreen extends React.Component {
  state = {
    pages:["page1","page2","page3","page4","page5"], // pre-define all your pages. Also make sure to add all the routes for each page
    selectedPages:[] // initially blank
  }
  render() {
    const { navigate } = this.props.navigation;
    const { pages, selectedPages } = this.state;
      return (
        <Fragment>
        <Text>ProfileScreen</Text>
        {
          // render a list of clickable page selector
          pages.map(page => {
            return(
              <TouchableOpacity key={page} onPress={() => {
                if(selectedPages.includes(page)){
                  // deselect the page, update the state and sort it.
                  this.setState({
                    selectedPages:selectedPages.filter(selectedPage => selectedPage!=page).sort()
                  })

                }else{
                  // select the page, update the state and sort it.
                  this.setState(prevState => ({
                      selectedPages:[...prevState.selectedPages, page].sort()
                  }))
                }
              }}>
                <Text style={{padding:20,backgroundColor:selectedPages.includes(page)?"green":"#ddd",marginVertical:2}}>{page}</Text>
              </TouchableOpacity>
            )
          })
        }
        <Button
          title="Go to next page"
          onPress={() => {
            if(selectedPages[0]){ // if selection contains atleast 1 page, pass the list of selected pages and the index of next page.
                navigate(selectedPages[0], {selectedPages:selectedPages, nextIndex:1})
            }else{
              // in case no page is selected
              Alert.alert("Please select atleast 1 page");
            }
          }}
        />
        </Fragment>
      );
  }
}

---

我希望它能有所帮助。

在每一页中，您都需要编写代码以移动到特定屏幕。我也对如何实现这一点感兴趣。选择列表逻辑会是什么样子？@Shury您可以使用FlatList来呈现项目列表，每个项目都是一个React组件，呈现一个可触摸的屏幕，它有一个onPress事件。在每个事件中，您可以使用this.setState更改selectedScreen和nextSelectedScreen的状态这是我的问题，如果我触摸其中一个可以设置selectedScreen的项目，我如何知道nextSelectedScreen是什么？

class ProfileScreen extends React.Component {
  state = {
    pages:["page1","page2","page3","page4","page5"], // pre-define all your pages. Also make sure to add all the routes for each page
    selectedPages:[] // initially blank
  }
  render() {
    const { navigate } = this.props.navigation;
    const { pages, selectedPages } = this.state;
      return (
        <Fragment>
        <Text>ProfileScreen</Text>
        {
          // render a list of clickable page selector
          pages.map(page => {
            return(
              <TouchableOpacity key={page} onPress={() => {
                if(selectedPages.includes(page)){
                  // deselect the page, update the state and sort it.
                  this.setState({
                    selectedPages:selectedPages.filter(selectedPage => selectedPage!=page).sort()
                  })

                }else{
                  // select the page, update the state and sort it.
                  this.setState(prevState => ({
                      selectedPages:[...prevState.selectedPages, page].sort()
                  }))
                }
              }}>
                <Text style={{padding:20,backgroundColor:selectedPages.includes(page)?"green":"#ddd",marginVertical:2}}>{page}</Text>
              </TouchableOpacity>
            )
          })
        }
        <Button
          title="Go to next page"
          onPress={() => {
            if(selectedPages[0]){ // if selection contains atleast 1 page, pass the list of selected pages and the index of next page.
                navigate(selectedPages[0], {selectedPages:selectedPages, nextIndex:1})
            }else{
              // in case no page is selected
              Alert.alert("Please select atleast 1 page");
            }
          }}
        />
        </Fragment>
      );
  }
}

const AppNavigator = createStackNavigator({
  home: HomeScreen,
  profile: ProfileScreen,
  page1: Page1,
  page2: Page2,
  page3: Page3,
  page4: Page4,
  page5: Page5
},
  {
    initialRouteName: 'home',
});