将值传递到React Native中的新屏幕

时间:2018-11-22 03:46:42

标签: reactjs react-native

我有一个视图,该视图可通过可触摸的不透明性单击,其中具有在内部呈现的item.address和item.price。

<TouchableOpacity onPress = {this.onShowHomeDetails.bind()}>
    <View style = {{height: 130,width :130,
        marginLeft : 20, borderWidth: 0.5, borderColor: '#dddddd'}} > 
        <View style={{flex: 2}}>
            <Image source={{uri : item.imageUrl}} 
               style={{flex:1, width: null,
               height: null, resizeMode: 'cover'}}/>
        </View> 
        <View style={{flex: 1 , paddingLeft: 10,paddingTop: 10}}>
            <Text style={{fontWeight:"bold", fontSize :12}}> 
                 {item.address} 
            </Text>
            {this.getIndividualHouseInfo(item.address)}  
        </View>
        <View style={{flex: 1 , paddingLeft: 10}}>
            <Text> ${item.price} </Text>    
        </View>
    </View>
</TouchableOpacity>

如何使用onShowHomeDetails函数通过导航将这些值传递到另一个屏幕?

onShowHomeDetails = () => {
    this.props.navigation.navigate('HomeDetails');
}

目标位置屏幕上的我的家庭详细信息组件是

class HomeDetails extends Component{
    constructor(props){
        super(props);
        this.state = {
        address : this.props.state.params.address,
        };
    }
    render(){
        return(
            <View style ={styles.container}>
                <Text>Details </Text>
                <Text>{this.state.address}</Text>
            </View>
        );
    }
}

2 个答案:

答案 0 :(得分:1)

很酷,我觉得很简单。

通话功能:

<TouchableOpacity onPress={this.onShowHomeDetails.bind(this, item)}>
                <View style = {{height: 130,width :130,
                    marginLeft : 20, borderWidth: 0.5,
                    borderColor: '#dddddd'}} > 
                      <View style={{flex: 2}}>
                        <Image source={{uri : item.imageUrl}} 
                        style={{flex:1, width: null,
                        height: null, resizeMode: 'cover'}} 
                        />
                    </View> 
                    <View style={{flex: 1 , paddingLeft: 10,paddingTop: 10}}>
                        <Text style={{fontWeight:"bold" , fontSize :12}}> {item.address} </Text>  
                        {this.getIndividualHouseInfo(item.address)}  
                    </View>
                    <View style={{flex: 1 , paddingLeft: 10}}>
                            <Text> ${item.price} </Text>    
                    </View>
                </View>
                </TouchableOpacity>

写功能:

 onShowHomeDetails = (item) => {
            this.props.navigation.navigate('HomeDetails', {item: item});
        }

在适当的屏幕上获取参数:

class HomeDetails extends Component{
    constructor(props){
        super(props);
        this.state = {
        address : props.navigation.getParam('item', '');
        };
    }
    render(){
        return(
            <View style ={styles.container}>
                <Text>Details </Text>
                <Text>{this.state.address}</Text>
            </View>
        );
    }
}

关于将值作为导航参数传递的一些重要的事情。

  1. 传递参数和getParams两者的名称应相同。

  2. 在getparams方法中,我们设置了空string('')。因为如果值不是
    通过,返回空字符串

请参阅本文档,它将为您提供帮助。 https://reactnavigation.org/docs/en/params.html

答案 1 :(得分:0)

您可以在导航到状态的同时传递数据。

onShowHomeDetails = () => {
    this.props.navigation.navigate('HomeDetails', { home: 'abc'}); 
    // you can pass any type of object in here as well
}

根据反应导航Object.keys。第二个参数是传递到目标路线的参数。

  

navigation.navigate({routeName,params,action,key})

并与道具一起在另一个组件中使用。 选项1:

this.props.navigation.getParam('home')

如果根本没有定义home,则选项1失败,但对于选项2,它将回退到bydefaultHome

选项2:

this.props.navigation.getParam('home', 'bydefaultHome');

希望这会有所帮助!