React Native之内部方法常用几种写法和调用规则

1 简单部分代码

export default class App extends Component<Props> {
  render() {
    return (
        <View style={styles.container}>
	    <View style={styles.welcome}>
                <Button onPress={this.showMsg}title='prees me showMsg'/> 
		<Button onPress={() => {this.showMessage()}}title='prees me showMessage'/> 
            </View>
        </View>
    );
  }
    //记得这里调用的时候不需要加上()
    showMsg(){
	alert("showMsg(){}");  
    }
    
    //记得末尾加上分号,调用的时候也要加上()
    showMessage = () => {
        alert("showMessage = () => {}");
    };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 10,
    textAlign: 'center',
    margin: 30,
  },
});

 

 

 

 

 

2 分别点击上面代码的2个按钮效果如下

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React Native提供了一个名为`WebView`的组件,可以用来加载并运行HTML页面,并且可以与HTML页面中的JavaScript代码进行交互。使用WebView可以实现在React Native调用JavaScript方法的功能,具体步骤如下: 1. 安装WebView组件:在React Native项目中执行`npm install react-native-webview`命令安装WebView组件。 2. 导入WebView组件:在需要使用WebView组件的文件中,使用`import { WebView } from 'react-native-webview';`语句导入WebView组件。 3. 在render()方法中使用WebView组件:使用`<WebView />`标签创建一个WebView组件,并设置`source`属性为HTML页面的URL或者本地文件路径。 4. 在JavaScript中定义需要调用方法:在HTML页面中定义需要调用的JavaScript方法,并使用`window.ReactNativeWebView.postMessage()`方法React Native发送消息。 5. 在React Native调用JavaScript方法:使用WebView组件的`injectJavaScript()`方法向WebView中注入JavaScript代码,调用在HTML页面中定义的方法。 示例代码如下: ``` import React, { Component } from 'react'; import { WebView } from 'react-native-webview'; class MyWebView extends Component { onMessage = (event) => { const { data } = event.nativeEvent; // 收到HTML页面发送的消息 console.log(data); } render() { return ( <WebView source={{uri: 'https://example.com'}} onMessage={this.onMessage} /> ); } } export default MyWebView; ``` HTML页面代码: ``` <button onclick="sendMessage()">发送消息</button> <script> function sendMessage() { window.ReactNativeWebView.postMessage('Hello from HTML!'); } </script> ``` 在React Native调用HTML页面中的`sendMessage()`方法: ``` webViewRef = React.createRef(); // 在componentDidMount()方法中获取WebView组件的引用 componentDidMount() { this.webViewRef.current.injectJavaScript(` sendMessage(); `); } ``` 上述代码通过在HTML页面中定义了一个`sendMessage()`方法,并使用`window.ReactNativeWebView.postMessage()`方法发送消息到React Native中。在React Native中使用`injectJavaScript()`方法向WebView中注入JavaScript代码,调用HTML页面中的`sendMessage()`方法,从而实现了React Native调用JavaScript方法的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码莎拉蒂 .

你的鼓励是我最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值