react-native的原生传参到rn

最新推荐文章于 2024-04-09 12:03:03 发布

big_sea_m

最新推荐文章于 2024-04-09 12:03:03 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： react-native

本文链接：https://blog.youkuaiyun.com/big_sea_m/article/details/78435638

react-native 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在React Native应用中从安卓原生代码传递参数，包括字符串和数组类型的参数。通过实例展示了如何设置和获取这些参数，并在React Native组件中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native的原生传参到rn

1.在安卓端的代码

package com.rndemo;

import android.os.Bundle;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RNDemo";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected Bundle getLaunchOptions() {
                Bundle initialProperties = new Bundle();
                // 传基本类型时直接获取出来就行
                initialProperties.putString("images1", "http://p1.so.qhimgs1.com/bdr/_240_/t01a89e7f72db801e71.jpg");
                initialProperties.putString("images2", "http://p2.so.qhimgs1.com/bdr/_240_/t01fdcfbcf2fa917c8e.jpg");
                ArrayList<String> data = new ArrayList<>();
                // 传集合用.map((url)=>console.log(url))   // 这样获取到
                initialProperties.putStringArrayList("data",data);
                return initialProperties;
            }
        };
    }
}

rn端代码

export default class App extends Component<{}> {

    constructor(props) {
        super(props);

        this.state={
            datas: []
        }
    }

    renderImage() {
        const images = [];
        const datas = this.state.datas;

        for (let i = 0; i < datas.length; i++) {
            images.push(
                <Image
                    key={i}
                    source={{uri: datas[i]}}
                    style={{width: 200, height: 200, backgroundColor: '#ff1900'}}
                    resizeMode="contain"
                />
            )
        }
        return images;
    }

    // 即将渲染布局
    componentWillMount() {
        const image = this.props.images1;

        ToastAndroid.show((typeof image),ToastAndroid.SHORT);
        // const data = [];
        // 将获取到的数据放在数组里
        // image.map((url)=> data.push(url));

        this.setState({
            datas: [image],
        })
    }


    render() {
        return (
            <View style={styles.container}>
                {this.renderImage()}
            </View>
        );
    }
}

安卓原生端传参到rn完。