2017-05-30 57 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