React Native Android

最新推荐文章于 2024-11-28 11:01:38 发布

猿来是9527

最新推荐文章于 2024-11-28 11:01:38 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

分类专栏：实际应用文章标签： android native react native android

本文链接：https://blog.youkuaiyun.com/moyinghui/article/details/51784987

实际应用专栏收录该内容

25 篇文章

订阅专栏

本文分享了作者首次使用React Native进行Android应用开发的经历，包括显示图片和弹出提示的基础操作。

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

<span style="font-family: Arial, Helvetica, sans-serif;">/**</span>

 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native';


var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://img1.cache.netease.com/ent/2015/8/4/20150804081025eb75c.jpg'}},
];

class SampleApp extends Component {
  render() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {movie.title+movie.year}
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>

            <Text style={styles.instructions} onPress={onClick}>
                Shake or press menu button for dev menu
            </Text>
            <Image
                source={{uri: movie.posters.thumbnail}}
                style = {styles.imagestyle}
            />

      </View>
    );
  }
}

function onClick(){
   var ToastAndroid = require('ToastAndroid')
   ToastAndroid.show('Awesome, Clicking!', ToastAndroid.SHORT);
   console.log('pressed')
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',//
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  btn:{
        width:50,
        backgroundColor:'#0091FF',
        justifyContent:'center',
        alignItems:'center'
      },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  style_view_button:{
      marginTop:15,
      marginLeft:10,
      marginRight:10,
      backgroundColor:'#63B8FF',
      borderColor:'#5bc0de',
      height:45,
      width:50,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  imagestyle: {
    width: 100,
    height:100,
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

rn 的android 教程我找了很久也没找到全面／细致一些的教程，真是苦恼，摸着石头过河真的很辛苦。可能还没兴起，所以教程比较少，不过这就是我的乐趣所在。

ps：虽然做了将近2年android，但是因为一点js基础都没有，做rn 太吃力，今天实现了显示image 和 toast，乐的不行。。。。。。。。。