2018年7月1日 星期日

[React Native]看著文件跌跌撞撞-Scroll View


如果要在js裡面寫css,安裝vs code的JavaScript Standard Style套件會快很多




import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, Alert, ScrollView, Image } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <Image style={styles.image} source={require('./static/squirtle.jpg')}></Image>
          <Text style={styles.text}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quos a nostrum ratione, fugit voluptates eius possimus obcaecati ipsa libero cum velit commodi veniam, nobis dolores quibusdam aspernatur cupiditate, in fugiat minima? Saepe vero sed quod fugiat magni, nihil aliquam incidunt cumque ad dolorem rem! Odio officiis, quae cumque in, hic fuga sed eum perferendis similique magnam quis doloremque reprehenderit rerum. Necessitatibus fugit quas illum, distinctio iusto fuga eos? Suscipit sint ex sapiente odio maxime voluptate ipsam quae, possimus sunt ea maiores saepe obcaecati at harum quidem natus? Quisquam dignissimos cumque, perferendis reprehenderit quo cupiditate molestias enim culpa libero deleniti expedita illo eius suscipit corporis? Fugiat officia nostrum soluta? Tempora pariatur et voluptates, corporis temporibus minima, magni eum optio fugiat, soluta sunt sapiente reiciendis odit earum tenetur veniam quibusdam suscipit exercitationem enim qui voluptatem? Ipsum amet ipsa et quasi vel maiores deserunt, fuga unde nostrum, totam aliquid mollitia similique quam dolorum veniam voluptas doloremque doloribus tempore sapiente facilis esse sit! Ab nostrum ipsum amet rerum totam odit, omnis suscipit quidem hic, commodi optio? Corrupti modi tenetur nobis cum? Vitae distinctio necessitatibus possimus accusamus, consequuntur repudiandae repellat iusto neque placeat dolorem expedita dignissimos? Laboriosam, dicta odio fugiat animi architecto corrupti at.</Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 25,
  },
  text : {
    fontSize: 30,
  },
  image : {
    flex : 1,
  }
});

沒有留言:

張貼留言