如何從一個屏幕數據傳遞到其他屏幕的陣營本地

Question

1 index.android.js

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    TextInput, 
    View 
} from 'react-native'; 

import Button from 'react-native-button'; 

class AwesomeProject extends Component { 

constructor(props){ 
super(props) 

this.state = { 
    username: '', 
    email: '', 
    address: '', 
    mobileNumber: '' 
} 


    render() { 
    return (
     <View style={styles.container}> 

     <TextInput 
     ref={component => this.txt_input_name = component} 
     style={styles.textInputStyle} 
     placeholder="Enter Name" 
     returnKeyLabel = {"next"} 
     onChangeText={(text) => this.setState({username:text})} 
     /> 

     <Button style={styles.buttonStyle}> 
     Submit 
     </Button> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
buttonStyle: { 
    alignSelf: 'center', 
    textAlign: 'center', 
    color: '#FFFFFF', 
    fontSize:18, 
    marginTop:20, 
    marginBottom:20, 
    padding:5, 
    borderRadius:5, 
    borderWidth:2, 
    width:100, 
    alignItems: 'center', 
    backgroundColor:'#4285F4', 
    borderColor:'#000000' 
} 
}); 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

Answer 1

您需要使用導航

this.props.navigator.push({ 
    name: 'Home', 
    passProps: { 
     name: property 
    } 
    }) 

通過道具到另一個頁面我把這個從這個鏈接https://medium.com/@dabit3/react-native-navigator-navigating-like-a-pro-in-react-native-3cb1b6dc1e30#.6yrqn523n

Answer 2

最初

import {Navigator} 

定義導航儀裏面的

渲染

功能

index.android.js

這樣

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

然後定義

renderscene功能

這樣

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

      {...route.passProps} 
      /> 
    ); 
    } 

} 

指定屬性

{...} route.passProps

將值傳遞給屏幕。在這裏，我已經給了它DetailPage

裏面然後你可以使用

passProps

調用下一個頁面。在我的情況

DetailPage

this.props.navigator.push({ 
     id: 'DetailPage', 
     name: 'DetailPage', 
     passProps: { 
     name:value 

    } 
});