React Native-如何在IntroSliders之后導航到主體

Question

我正在嘗試將打開的應用程序簡介滑塊集成到我的應用程序中，但是無法將要從簡介中獲得的要點連接到我的主要應用程序主體。

我正在使用的庫說這樣使用“ react-native-app-intro-slider”，其中_onDone()函數以完成介紹並顯示“真實”應用程序：

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

我怎樣才能在介紹了內插器之后渲染它？ 是否將所有內容都放在_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 。