Как сделать многостраничное приложение в интерактивном режиме?

tutorial для response-native показывает нам, как отображать одностраничное приложение, создавая React "Class", который имеет a render() метод, названный в честь приложения, со всей логикой визуализации.

Это в основном отображает страницу. Что делать, если у меня есть несколько довольно разных страниц? Должен ли я создать это "приложение" и эффективно иметь оператор switch в методе визуализации в зависимости от того, на какой странице находится пользователь, или... есть ли лучший/встроенный способ переключения между страницами?

Ответы

Ответ 1

Навигатор - это компонент, который я использую для решения этой проблемы.

1. Определите свой первоначальный маршрут и общие свойства в методе рендеринга:

class MyApp extends React.Component {

render () {
    return (
        <Navigator
            initialRoute={{id: 'SplashPage', name: 'Index'}}
            renderScene={this.renderScene.bind(this)}
            configureScene={(route) => {
        if (route.sceneConfig) {
          return route.sceneConfig;
        }
        return Navigator.SceneConfigs.VerticalDownSwipeJump;
      }}/>
    );
   }
}

2. И тогда вам нужно определить другие сайты/представления/страницы, в которые вы хотите пойти, в методе renderScene:

renderScene ( route, navigator ) {
    var routeId = route.id;
    if (routeId === 'SplashPage') {
        return (
            <SplashPage
                navigator={navigator}/>
        );
    }
    if (routeId === 'LoginPage') {
        return (
            <LoginPage
                navigator={navigator}/>
        );
    }
}
}

3. В Splash Class вы видите, как вы переходите на следующую страницу, как только в этом примере 2 секунды закончились следующим кодом: (я думаю, было бы лучше, если бы что-то вроде replaceWith, а не просто заменить, но неважно: P )

class SplashPage extends Component {
componentWillMount () {
    var navigator = this.props.navigator;
    setTimeout (() => {
        navigator.replace({
            id: 'LoginPage',
        });
    }, 2000);
}

render () {
    return (
        <View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}>
            <Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image>
        </View>
    );
}
}

module.exports = SplashPage;

Ответ 2

Я нашел @Mr Brown ответ, немного запутанный, поэтому я в основном переписал его кодом - вот пример: Navigator, совместимый с Android и iOS:

var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.push({id: 2,});
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
       </View>
    )
  },
});

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
       </View>
    )
  },
});

var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene} />
    );
  }
});

Ответ 3

Используйте Navigator или Modal, чтобы введите новую страницу.