打开的反应母语

Question

另一个屏幕，我有这个屏幕反应本土

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的方法？

Answer 1

你必须实现一个导航仪，这大概是管理与屏幕的所有东西的组成部分，并与后退按钮标题栏等

当你是一个初学者，我建议你去看看此链接文档：

https://facebook.github.io/react-native/docs/navigator.html

对不起，我简短的回答，我是我的手机上。

祝你好运！

Answer 2

您必须使用导航器。请阅读下面提到的文档。如果你需要的话，我会分享你的代码。

下面是一个例子：NavigatorExample

Answer 3

正如其他人所指出的，你必须使用的Navigator实例屏幕之间的转换。也许你可以看看React Native回购中的example apps。我也发现this router package很容易设置，它还包括一个示例应用程序，您可以使用它作为一个起点。然后

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功能：

编辑 作为使用反应本地路由器通量一个简单的例子，你可以编辑Example.js文件中的Example目录看起来像这样，你必须做到以下几点：

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

我还没有测试代码，所以可能有一些错别字/缺少进口/代码，但它笑你可以告诉你你必须做什么。 }