React Native-如何在IntroSliders之后导航到主体

Question

I'm trying to integrate opening app intro sliders to my app, but failing to connect the points to get from the intro to my main app body.

The library i'm using says use 'react-native-app-intro-slider' as such, where an _onDone() function is called to finish the intro and show the 'real' app:

export default class App extends React.Component {
  _onDone = () => {
    // User finished the introduction. Show "real" app
  }
  render() {
    return (
      <AppIntroSlider
        slides={slides}
        onDone={this._onDone}
      />
    );
  }
}

With the main body of my app (it works when I run it without the intro-slider addition) being this:

render() {
    const contents = collection.map((item, index) => {
                return (
                    <Card key={index}>
                       [[there's stuff here omitted]]
                    </Card>
                )
              });
    return (
                <View style={{flex:1}}>
                  <CardStack>
                   {contents}
                  </CardStack>
                </View>
              );

How can I get this to render after the introslider? Do I put all that inside the _onDone() function? (this doesn't work). Or is there a way write _onDone so that after the component, the regular part of the main app would proceed to go as before?

export default class App extends React.Component {
  _onDone = () => {
    // Something that lets me pass onto the main part of my app
  }
  render() {
    return (
      <AppIntroSlider
        slides={slides}
        onDone={this._onDone}
      />

// The main body of the app that I want React to get to after the <AppIntroSlider> component.

    const contents = collection.map((item, index) => {
            return (
                <Card key={index}>
                  [[there's stuff here omitted]]
                </Card>
            )
          });
      return (
            <View style={{flex:1}}>
              <CardStack>
                {contents}
              </CardStack>
            </View>
          );
    );
  }
}

Answer 1

If you're not using a navigation library, I would suggest to simply use state:

constructor(props) {
  super(props);

  this.state = {
    showRealApp: false
  }
}

_onDone = () => {
  this.setState({ showRealApp: true });
}
render() {
  if (this.state.showRealApp) {
    const contents = collection.map((item, index) => (
      <Card key={index}>
        {...}
      </Card>
    ));
    return (
      <View style={{flex:1}}>
        <CardStack>
          {contents}
        </CardStack>
      </View>
    );
  } else {
    return <AppIntroSlider slides={slides} onDone={this._onDone}/>;
  }
}

You can also consult issue #18 on the react-native-app-intro-slider repo.