Question

我有一个视图，该视图可通过可触摸的不透明性单击，其中具有在内部呈现的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>
        );
    }
}

Answer 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>
        );
    }
}

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

传递参数和getParams两者的名称应相同。
在getparams方法中，我们设置了空string（''）。因为如果值不是
通过，返回空字符串

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

Answer 2

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

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');

希望这会有所帮助！

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

2 个答案: