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

更多请见:http://www.mark-to-win.com/tutorial/51883.html

  • 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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值