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

Question

我正在尝试将打开的应用程序介绍滑块集成到我的应用程序中，但无法连接从介绍到我的主要应用程序主体的点。

The library i'm using 表示使用 'react-native-app-intro-slider'，其中调用 _onDone() 函数来完成介绍并显示 'real' 应用程序：

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

我的应用程序的主体（当我运行它没有添加 intro-slider 时它工作）是这样的：

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>
              );

我怎样才能让它在 introslider 之后呈现？我是否将所有这些都放在 _onDone() 函数中？（这不起作用）。或者有没有办法写 _onDone 以便在组件之后，主应用程序的常规部分会像以前一样继续进行？

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

如果您不使用导航库，我建议您只使用 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}/>;
  }
}

您还可以参考 react-native-app-intro-slider 存储库中的问题 #18。

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

React Native - How to navigate to main body after IntroSliders

javascript

reactjs

react-native

react-navigation