android– 在react-native中打开另一个屏幕

概述我有这个屏幕反应原生importReact,{Component}from'react';import{AppRegistry,TouchableOpacity,Text,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight}from'react-native';classLoginViewext

我有这个屏幕反应原生

    import React, { Component } from 'react';    import { AppRegistry,touchableOpacity, Text ,button,Image,Textinput,PropTypes,StyleSheet,VIEw,NavigatorIOS,touchableHighlight} from 'react-native';    class LoginVIEw extends Component {        render() {            return (                <VIEw style={styles.container}>                    <Text style={styles.Title}>                        HYGEX                    </Text>                    <VIEw>                        <Textinput                            placeholder="Username"                            style={styles.forminput}                             />                        <Textinput                            placeholder="Password"                            secureTextEntry={true}                            style={styles.forminput1}                             />                    <touchableHighlight style={styles.button}                    onPress={() => this.move()}>                    <Text style={styles.buttonText}>Login</Text>                   </touchableHighlight>                    </VIEw>                </VIEw>            );        }      move() {      //what i can do here to go to Socrce screen ???        }      }

登录屏幕之类的东西,现在点击进入touchableHighlight
    我需要打开这个屏幕

    'use strict';import React, { Component } from 'react';import { AppRegistry, ListVIEw, Text, VIEw } from 'react-native';class HygexListVIEw extends Component {  constructor(props) {    super(props);    const ds = new ListVIEw.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    this.state = {      dataSource: ds.cloneWithRows([        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'JulIE', 'Devin'      ])    };  }  render() {    return (      <VIEw style={{flex: 1, paddingtop: 22}}>        <ListVIEw          dataSource={this.state.dataSource}          renderRow={(rowData) => <Text>{rowData}</Text>}        />      </VIEw>    );  }}module.exports = HygexListVIEw;

我试图实现移动方法,但我失败了！知道为什么吗？

当您点击进入touchableHighlight时,react-native是否有更改屏幕的方法？

解决方法:

正如其他人指出的那样,您必须使用Navigator实例在屏幕之间进行切换.也许你可以看一下React Native repo中的example apps.我还发现this router package很容易设置,它还包括一个示例应用程序,您可以将其作为起点.

编辑
作为使用react-native-router-flux的简单示例,您可以编辑Example目录中的Example.Js文件,如下所示：

import React, {  Component,} from 'react';import {  StyleSheet,  Text,  VIEw,} from 'react-native';import LoginVIEw from './LoginVIEw';import HygexListVIEw from './HygexListVIEw';import {  Scene,  Router,  Actions,} from 'react-native-router-flux';const styles = StyleSheet.create({  container: { flex: 1, backgroundcolor: 'transparent', justifyContent: 'center',    alignItems: 'center',  },  tabbarStyle: {    backgroundcolor: '#eee',  },  tabbarSelectedItemStyle: {    backgroundcolor: '#ddd',  },});// define this based on the styles/dimensions you useconst getScenestyle = (/* NavigationSceneRendererProps */ props, computedProps) => {  const style = {    flex: 1,    backgroundcolor: '#fff',    shadowcolor: null,    shadowOffset: null,    shadowOpacity: null,    shadowRadius: null,  };  if (computedProps.isActive) {    style.margintop = computedProps.hIDeNavbar ? 0 : 64;    style.marginBottom = computedProps.hIDeTabbar ? 0 : 50;  }  return style;};class Example extends Component {  render() {    return (      <Router getScenestyle={getScenestyle}>        <Scene key="login" component={LoginVIEw} initial={true}/>        <Scene key="hygex" component={HygexListVIEw } />      </Router>    );  }}export default Example;

然后,在组件的移动功能中,您必须执行以下 *** 作：

move(){    Actions.hygex(); // This will perform a slIDe Transition, but you can customize it. Have a look at the docs for that.

我没有测试过代码,所以可能会有一些拼写错误/缺少导入/代码,但它应该让你知道你必须做什么.
    }

总结

以上是内存溢出为你收集整理的android – 在react-native中打开另一个屏幕全部内容，希望文章能够帮你解决android – 在react-native中打开另一个屏幕所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。