在React導航的不同屏幕之間傳遞TextInput道具

我完全喪失瞭如何從窗體屏幕抓取兩個參數並通過React Navigator傳遞它們並將它們顯示在前一個屏幕上。在React導航的不同屏幕之間傳遞TextInput道具

該問題的應用部分是這樣的：
1. touchablehighlight形成屏幕。
2.輸入標題和描述，並按提交onpress
3. onpress運行一個函數，通過一個鍵調度參數到上一頁。
4.然後返回到原始頁面，顯示道具。

我有多個處理程序的問題：
1.如果我理解正確的文檔，每一頁都有一個唯一的關鍵，我試圖通過this.props.navigation.state.key找到它，但未知對我來說，刷新身份證號碼會改變。
2.導致問題2功能將運行，但它不會重定向回原始頁面。
3.我已經嘗試過.dispatch之後的.navigate行，但它會打開原始頁面的新副本，並且不會顯示可靠傳遞的新道具。

import React from 'react'; 
 
import styles from '../styling/style.js'; 
 
import { Text, View, Image, TouchableHighlight, TextInput, Alert } from 'react-native'; 
 
import { StackNavigator, NavigationActions } from 'react-navigation'; 
 
import Forms from './formGenerator'; 
 

 
export default class Workout extends React.Component { 
 
constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    programTitle: '', 
 
    programDescription: '' 
 
    } 
 
} 
 

 
render() { 
 
    const {navigate} = this.props.navigation; 
 
    return ( 
 
    <Image style={styles.workoutContainer, { flex: 1}} source={require("../images/HomepageBackground.jpg")}> 
 
     <View style={styles.workoutBody}> 
 
      <Text style={styles.workoutTextBody}> {this.state.programTitle}</Text> 
 
      <Text style={styles.workoutTextBody}>{this.state.programDescription}</Text> 
 
     </View> 
 
     <View style={styles.createButton}> 
 
     <TouchableHighlight onPress={Alert.alert(this.props.navigation.state.key)} style={styles.addButtonTouch} title='test' > 
 
     \t <Text style={styles.addButtonText}>+</Text> 
 
     </TouchableHighlight> 
 
     </View> 
 
    </Image>  
 
    ); 
 
    } 
 

 
// End of the render 
 
}

import React from 'react'; 
 
import styles from '../styling/style.js'; 
 
import { Text, View, Image, TouchableHighlight, TextInput, Button, Alert } from 'react-native'; 
 
import Workout from './workouts'; 
 
import { NavigationActions } from 'react-navigation'; 
 

 

 
export default class Forms extends React.Component { 
 
constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    programTitle: '', 
 
    programDescription: '' 
 
    } 
 
} 
 

 
render() { 
 
    const {goBack} = this.props.navigation; 
 
    const {params} = this.props.navigation.state; 
 
    return ( 
 
    <Image style={styles.workoutContainer, { flex: 1}} source={require("../images/HomepageBackground.jpg")}> 
 
     <View style={styles.workoutBody}> 
 
     <Text style={styles.formHeader}>Program Title</Text> 
 
      <TextInput 
 
      autoFocus={true} 
 
      style={styles.formBody} 
 
      onChangeText={(programTitle) => this.setState({programTitle})} 
 
      placeholder='Title' 
 
      value={this.state.programTitle} /> 
 
     <Text style={styles.formHeader}>Description (Ex. 4sets x 10reps)</Text> 
 
      <TextInput 
 
      autoFocus={true} 
 
      style={styles.formBody} 
 
      placeholder='Description' 
 
      onChangeText={(programDescription) => this.setState({programDescription})} 
 
      value={this.state.programDescription} /> 
 
     <TouchableHighlight onPress={this.addProgram} style={styles.buttonBody} title="Add Program" > 
 
      <Text>Add Program</Text> 
 
     </TouchableHighlight> 
 
     </View> 
 
    </Image>  
 
    ); 
 
    } 
 

 
addProgram =() => { 
 
    Alert.alert(this.props.navigation.state.key); 
 
    this.setState({programTitle: ''}); 
 
    this.setState({programDescription: ''}); 
 
    const setParamsAction = NavigationActions.setParams({ 
 
    params: { programTitle: this.state.programTitle, programDescription: this.state.programDescription }, 
 
    key: , 
 
}) 
 
this.props.navigation.dispatch(setParamsAction) 
 
}; 
 

 
}

來源

2017-07-06 RandomC

對不起，我沒有得到你..哪一個你指的是當前屏幕和前一個屏幕？ –

@JefreeSujit對不起，這將是這樣的第一頁（onpress）> formpage（onpress）>回到原始頁面w /更新狀態 – RandomC

我建議你使用回調，而不是使用頁面密鑰。將回調作爲道具傳遞給formpage並且onSubmit返回false並將值傳遞給父回調，並讓父級提交值。通過這種方式，第一頁可以保留這些值。 –

如果你正試圖從「下一頁」得到的參數，你可以有兩種方法。

1，保存PARAMS在AsyncStorage（建議）

2，使用導航setParams功能與PARAMS

const setParamsAction = NavigationActions.setParams({ 
    params: { title: 'Hello' }, 
    key: 'screen-123', 
}) 
this.props.navigation.dispatch(setParamsAction)

https://reactnavigation.org/docs/navigators/navigation-actions

來源

2017-07-06 10:31:50 Charles

你只是試圖顯示從Forms類信息在Workout class上，正確？

從你的Workout類，創建一個函數，更新它的狀態。

updateWorkoutState = (programTitle,programDescription) => this.setState(programTitle,programDescription)

當您推送該路線時，將該函數傳遞給Forms類。

this.props.navigation.navigate('Forms',{updateWorkoutState: this.updateWorkoutState}

一旦你的條件得到滿足的Forms類，你要更新的Workout組件，與this.props.navigation.state.params.updateWorkoutState(val1,val2)

叫它不要使用AsyncStorage這一點。

來源

2017-07-06 12:58:27 parker

在React導航的不同屏幕之間傳遞TextInput道具

回答

相關問題