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

Question

我在 React Native 中有这个屏幕

    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 是否有改变屏幕的方法？

Answer 1

正如其他人所指出的，您必须使用 Navigator 的实例在屏幕之间进行转换。也许你可以看看 example apps在 React Native 仓库中。我也找到了 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 use
const 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 函数中，您必须执行以下操作:

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

我没有测试代码，所以可能会有一些拼写错误/缺少导入/代码，但它应该让您了解您必须做什么。