Question

第9行出错我需要更改WebView的状态（url）。这是我的第一个功能错误... 任何帮助，将不胜感激。 enter image description here

我对这个

相当新

我需要TouchableOpacity来更改触摸的网址状态。

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

Answer 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关键字有效。

React Native WebView重新加载状态更改

1 个答案: