2017-05-30 55 views
1

错误第9行 我需要更改WebView的状态(url)。 这些是我的第一个功能的错误... 任何帮助,将不胜感激。 enter image description hereReact原生WebView刷新状态

我是相当新的这个

我需要TouchableOpacity改变触摸的URL状态。

import React, { Component } from 'react'; 
import {View, WebView, Dimensions, AppRegistry, StatusBar, Text, TouchableOpacity} from 'react-native'; 

let ScreenHeight = Dimensions.get("window").height; 
let ScreenWidth = Dimensions.get("window").width; 

export default class dynamix extends Component { 

    function setState(obj){ 
    this.state.url = obj.url; 
    } 

    function onPressButtonURL1(){ 
    this.setState({ url: 'url1'}) 
    } 
    function onPressButtonURL2(){ 
    this.setState({ url: 'url2'}) 
    } 
    function onPressButtonURL3(){ 
    this.setState({ url: 'url3'}) 
    } 

    render() { 
    return (
     <View> 
     <View style={{height:ScreenHeight-100, width:ScreenWidth}}> 
     <WebView style={{ 
      paddingTop:25, 
      backgroundColor: '#f8f8f8', 
      width:ScreenWidth, 
      height:ScreenHeight, 
     }} 
     source={{ url: this.state.url }} 
     /> 
     <StatusBar hidden /> 
     </View> 
       <View style={{ 
       backgroundColor:'#131313', 
       height:100, 
       width:ScreenWidth 
       }}> 
       <View style={{ 
       width:ScreenWidth 
       }}> 
        <TouchableOpacity onPress={() => onPressButtonURL1()}><Text style={{color:'#fff', padding:10,fontSize:15}}>"text1"</Text></TouchableOpacity> 
        <TouchableOpacity onPress={() => onPressButtonURL2()}><Text style={{color:'#fff', padding:10,fontSize:15}}>"text2"</Text></TouchableOpacity> 
        <TouchableOpacity onPress={() => onPressButtonURL3()}><Text style={{color:'#fff', padding:10,fontSize:15}}>"text3"</Text></TouchableOpacity> 
       </View> 
       </View> 
     </View> 
    ); 
    } 
} 

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

回答

1
import React, { Component } from 'react'; 
import { Text, View, WebView, TouchableOpacity, Dimensions } from 'react-native'; 

const { 
    height: ScreenHeight, 
    width: ScreenWidth 
} = Dimensions.get('window'); 

export default class dynamix extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     url: 'https://www.google.co.uk' 
    } 
    } 
    onPressButtonURL = (url) => { 
    this.setState({ url }) 
    } 
    render() { 
    return (
     <View> 
     <View style={{height:ScreenHeight-100, width:ScreenWidth}}> 
     <Text>{this.state.url}</Text> 
     <WebView style={{ 
      paddingTop:25, 
      backgroundColor: '#f8f8f8', 
      width:ScreenWidth, 
      height:ScreenHeight, 
     }} 
     source={{ uri: this.state.url }} 
     /> 
     </View> 
       <View style={{ 
       backgroundColor:'#131313', 
       height:100, 
       width:ScreenWidth 
       }}> 
       <View style={{ 
       width:ScreenWidth 
       }}> 
        <TouchableOpacity onPress={() => this.onPressButtonURL('https://stackoverflow.com')}><Text style={{color:'#fff', padding:10,fontSize:15}}>text1</Text></TouchableOpacity> 
        <TouchableOpacity onPress={() => this.onPressButtonURL('https://www.google.com')}><Text style={{color:'#fff', padding:10,fontSize:15}}>text2</Text></TouchableOpacity> 
        <TouchableOpacity onPress={() => this.onPressButtonURL('https://bbc.co.uk')}><Text style={{color:'#fff', padding:10,fontSize:15}}>text3</Text></TouchableOpacity> 
       </View> 
       </View> 
     </View> 
    ); 
    } 
} 

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

编辑:我刚才看到你附加的图像,关键字function抛出你的错误。

如果你去here

class Person { 
    function setName(name) { 
    this.name = name; 
    } 
} 

粘贴你会看到Unexpected token (2:11)错误。删除function关键字的作品。

+0

新错误:无法读取null的属性'url' –

+0

在您的构造函数中,您应该通过'this.state = {url:'http // www.google.com'来设置'url'的初始值。 '' - 哪一行是抛出的错误? – Dan

+0

还有一件事,'setState()'是React中的一个函数,你不应该提供你自己的实现。请看我修改后的答案。 – Dan