Question

我在React Native应用中创建了注册功能。我在渲染中有一个可触摸的亮点：

＆＃13;

<TouchableHighlight style={styles.button} onPress={this._handleSignUp}>
    <Text style={styles.white_text}>Sign Up</Text>
</TouchableHighlight>

＆＃13;

＆＃13; 这是handleSignUp函数：

＆＃13;

  _handleSignUp: function(){
      fetch('https://api.parse.com/1/users', {
      method: 'post',
      headers: {
            'X-Parse-Application-Id': 'MY_ID',
            'X-Parse-REST-API-Key': 'MY_KEY',
            'X-Parse-Revocable-Session': '1',
            'Content-Type': 'application/json'
        },
      body: JSON.stringify({
      username: this.state.username,
      student_id: this.state.id,
      password: this.state.password,
      })
    }).then((response) => response.text())
  .then((responseText) => {
    if (responseText.code=='201'){
      // redirect to Profile Scene
    }
  });
  },

＆＃13;

＆＃13; 因此，如果用户成功注册，我希望他被重定向到不同的场景。

我们如何在React native中处理这种类型的重定向？

Answer 1

使用

this.props.navigator.redirect(route)

没有道具只需使用this.navigator.redirect(route)

Answer 2

您使用NavigatorIOS或较低级别的导航器。有关更多详细信息，请参阅此文档页面：

http://facebook.github.io/react-native/docs/navigator-comparison.html#content

Navigator和NavigatorIOS都是允许您使用的组件在各种“场景”之间管理应用中的导航（另一个屏幕上的字）。他们管理一个路由堆栈，让你弹出，推动并替换状态。这样，它们类似于html5 历史API。

Answer 3

您必须使用NavigationExperiemental。话虽如此，NavigationExperimental的级别太低了，使用第三方库在场景组件之间导航，以及获得移动UI模式常见的所有奇特的过渡动画可能要容易得多。如果您熟悉网络上的React Router，我强烈建议您查看React Router Native。

免责声明：我是作者。

该项目托管在GitHub上：

https://github.com/jmurzy/react-router-native

这是一个完全符合你想要的例子以及80以下的更多内容。

 /**
 * index.[ios|android].js
 */

import React from 'react';
import {
  Header,
  Link,
  nativeHistory,
  Route,
  Router,
  StackRoute,
  withRouter,
} from 'react-router-native';
import {
  AppRegistry,
  ScrollView,
  StyleSheet,
  View,
} from 'react-native';

const styles = StyleSheet.create({
  component: {
    backgroundColor: '#FFFFFF',
    flex: 1,
  },
  home: {
    backgroundColor: '#FFFFFF',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  detailCard: {
    height: 100,
    margin: 20,
    width: 100,
  },
});

const Master = (props) => (
  <View style={styles.component}>
    {props.children}
  </View>
);

const HomeHeader = withRouter((props) => {
  const handleRightButtonPress = () => {
    props.router.push('/detail/gray');
  };

  return (
    <Header
      {...props}
      style={{ backgroundColor: '#26BBE5' }}
      title="Feed"
      rightButtonText="Gray"
      onRightButtonPress={handleRightButtonPress}
    />
  );
});

const Home = () => {
  const DetailCard = ({ backgroundColor }) => (
    <Link to={`/detail/${encodeURIComponent(backgroundColor)}`} style={styles.detailCard}>
      <View style={{ flex: 1, backgroundColor }} />
    </Link>
  );

  return (
    <ScrollView style={styles.component} contentContainerStyle={styles.home}>
      <DetailCard backgroundColor="#EF4E5E" />
      <DetailCard backgroundColor="#9498CA" />
      <DetailCard backgroundColor="#AFCCB3" />
      <DetailCard backgroundColor="#F0D73D" />
      <DetailCard backgroundColor="#A176B0" />
      <DetailCard backgroundColor="#416BB4" />
      <DetailCard backgroundColor="#94B5DC" />
      <DetailCard backgroundColor="#D48445" />
    </ScrollView>
  );
};

const DetailHeader = withRouter((props) => {
  const { routeParams } = props;
  const title = routeParams.themeColor;
  const backgroundColor = routeParams.themeColor;
  const colors = ['#EF4E5E', '#D48445', '#AFCCB3', '#F0D73D', '#A176B0'];

  const handleRightButtonPress = () => {
    const randomIndex = Math.floor(Math.random() * colors.length);
    const randomColor = colors[randomIndex];
    props.router.push(`/detail/${encodeURIComponent(randomColor)}`);
  };

  return (
    <Header
      {...props}
      title={title}
      style={{ backgroundColor }}
      leftButtonText="Back"
      rightButtonText="Random"
      onRightButtonPress={handleRightButtonPress}
    />
  );
});

const Detail = (props) => (
  <View style={[styles.component, { backgroundColor: '#FFFFFF' }]}>{props.children}</View>
);

const routes = (
  /* Address Bar can be toggled on or off by setting the addressBar prop */
  <Router history={nativeHistory} addressBar>
    <StackRoute path="master" component={Master}>
      <Route path="/" component={Home} overlayComponent={HomeHeader} />
      <Route path="/detail/:themeColor" component={Detail} overlayComponent={DetailHeader} />
    </StackRoute>
  </Router>
);

AppRegistry.registerComponent('YourApp', () => () => routes);

Answer 4

我不确定这里有什么问题。

要么重定向到另一个页面，那么您的路由器将加载另一个组件。

或者，您可以在请求成功时直接呈现配置文件组件 React.render（，document.getElementById（'thedivyouwanttoattachyourcomponent'））;

我希望它有所帮助

重定向到React Native中的不同场景

4 个答案: