Question

我在router-flux导航栏中实现了一个右键：

  static renderRightButton = (props) => {
          return (
              <TouchableOpacity onPress={() => this.getCurrentPosition()} style={{bottom: 4, right: 8}}>
                  <Icon name='ios-locate-outline' style={{color: 'white'}} />
              </TouchableOpacity>
          );
    }

但如果我点击我的按钮，我会收到此错误：this.5.getCurrentPosition is not a function

我在构造函数中声明我的函数 this.getCurrentPosition = this.getCurrentPosition.bind(this)

Answer 1

您使用的是static方法，这意味着您无法访问仅适用于实例的this。

所以你可以

1）删除static

renderRightButton = () => {
          return (
              <TouchableOpacity onPress={() => this.getCurrentPosition()} style={{bottom: 4, right: 8}}>
                  <Icon name='ios-locate-outline' style={{color: 'white'}} />
              </TouchableOpacity>
          );
    }

2）或将getCurrentPosition作为参数传递给render方法。

static renderRightButton = (props, getCurrentPosition) => {
          return (
              <TouchableOpacity onPress={getCurrentPosition} style={{bottom: 4, right: 8}}>
                  <Icon name='ios-locate-outline' style={{color: 'white'}} />
              </TouchableOpacity>
          );
    }

Answer 2

因此我们使用RNRF遇到了同样的问题，我们的解决方案是利用Actions.refresh API。

对于您的情况，您可以这样做：

class AddEventPage extends Component {
  constructor(props) {
    this.getCurrentPosition = this.getCurrentPosition.bind(this);
    this.renderRightButton = this.renderRightButton.bind(this);
  }
  componentDidMount() {
    Actions.refresh({ renderRightButton: this.renderRightButton });
  }

  renderRightButton = (props) => {
    return (
      <TouchableOpacity onPress={() => this.getCurrentPosition()} style={{bottom: 4, right: 8}}>
        <Icon name='ios-locate-outline' style={{color: 'white'}} />
      </TouchableOpacity>
    );
  }

  getCurrentPosition() {
    //Your implementation
  }  
}

Answer 3

假设您正在使用import tkinter as tk import turtle WIDTH = 300 root = tk.Tk() # extra work up front to make canvas smaller than window root.title('Python Turtle Graphics') root.geometry('{}x{}'.format(WIDTH, WIDTH * 2)) canvas = tk.Canvas(root, width=5 * WIDTH / 6, height=WIDTH * 2) canvas.pack() screen = turtle.TurtleScreen(canvas) actor = turtle.RawTurtle(screen, shape='turtle') actor.penup() actor.right(45) actor.goto(-WIDTH / 2, -5 * WIDTH / 6) actor.pendown() for y in range(3): actor.circle(WIDTH / 2**0.5, steps=4) actor.sety(actor.ycor() + WIDTH / 3) root.mainloop()文件，则返回可以采用html格式，但您不能以这种方式构造它。您的转发器未通过jsx表达式。看一下你的缩小文件并搜索它。

这就是this.getCurrentPosition()

中embed个词的表达方式

jsx

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'test',
  lastName: 'tesjgg'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Answer 4

因为renderRightButton是静态的，你可以尝试：

import { Actions } from 'react-native-router-flux'
constructor (props) {
  this.handleSave = this.handleSave.bind(this)
}
renderRightButton = () => {
return (
  <TouchableOpacity onPress={this.handleSave}>
    <Text>Save button</Text>
  </TouchableOpacity>
)
} 
async componentDidMount () {
  Actions.refresh({renderRightButton: this.renderRightButton})
} 
async handleSave () {
  console.log('save action')
}

router-flux navbar button this.function不是一个函数

4 个答案: