CODEWITHSUNDEEP
javascriptreactjsreact-native
Alexandre Michaud
Alexandre Michaud

Reputation: 241

Click on a button don't display the WebView

I'm developing an app in react-native and i'm confronted to a problem:

I want that when i click on a button ( or directly the View where the button is ) a Webview is shown on screen and open the link directly passed in parameters. But nothing happens.

Here is my code:

return (
            <ScrollView style={[style.case1]} refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this.handleRefresh} />} >
                {
                    this.state.orders.map(function (order) {
                        let a = _this.getPosts(order);
                        let Final = _this.splitString(a.message," ");
                        return (
                        <View style={[style.case2]} key={a.message} >
                            <Couleur couleur={Final[4]} />
                            <Text style={[style.Nom]} >Nom : {Final[1]}</Text>
                            <Text style={[style.Nom]} >Numéro de build : {Final[2]}</Text>
                            <Button onPress={<Web url={Final[3]} />}  title="Click"/>
                        </View>
                    );
                })}
            </ScrollView>
        );

And the WebView class : 

import React, {Component} from "react";
import {WebView} from "react-native";

export default class Web extends Component {
    constructor(props){
        super(props);
    }
    render() {
        let uri = this.props.url;
        return(
            <WebView
                ref={(ref) => {this.webview = ref;}}
                source={{uri}}
                style={{marginTop:20}}
            />
        )
    }
}

And i got this error :

"Object is not a function(evaluating 'this.props.onPress(e)')

I would be very happy if someone help me ! :)

Upvotes: 0

Views: 1507

Answers (1)

BoxerBucks
BoxerBucks

Reputation: 3124

The onPress action needs to be a function that does something. Right now, you are setting the action to a component and react doesn't know what to do with that.

Without some kind of navigation library controlling your views, you could do something like have the onPress set some state that controls a part of the render function that either shows your existing page or the new 'Web' component.

So make onPress like: onPress={e => this.setState({showWebPart:true})}

Then in your current render function you could have a ternary like:

{this.state.showWebPart ? <Web url={Final[3]} /> : ..current render stuff}

Upvotes: 1

Related Questions