<template>
<view class="container">
<!-- hiển thị text -->
<text class="text-color-primary">{{text}}</text>
<!-- tạo button vs sự kiện click -->
<button v-bind:title="button_title" v-bind:on-press="handleClick" />
<!-- img với src ở asset trong source -->
<image :source="require('./assets/icon.png')" />
<!-- img với style and src là 1 link online -->
<image
:style="{width: 50, height: 50}"
:source="{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}"
/>
<!-- ô input với bind modal -->
<text-input
:style="{height: 40, width: 100, borderColor: 'gray', borderWidth: 1}"
v-model="text_input"
/>
<text>{{text_input}}</text>
<scroll-view
:content-container-style="{contentContainer: {
paddingVertical: 20
}}"
>
<!-- Content goes here -->
</scroll-view>
</view>
</template>
<script>
export default {
data: function() {
return {
text: "Hello Worldsss",
button_title: "Press me",
text_input: ""
};
},
methods: {
handleClick() {
alert(1);
}
}
};
</script>
<style>
.container {
background-color: white;
align-items: center;
justify-content: center;
flex: 1;
}
.text-color-primary {
color: blue;
}
.text-container {
flex: 1;
margin-bottom: 30;
}
</style>
<button
:on-press="onPressLearnMore"
title="Learn More"
color="#841584"
accessibility-label="Learn more about this purple button"
/>
<template>
<view class="container">
<flat-list :data="[{key: 'a'}, {key: 'b'}]" :render-item="(item) => renderList(item)" />
</view>
</template>
<script>
import React from "react";
import { Text } from "react-native";
export default {
data: function() {
return {};
},
methods: {
renderList: function(item) {
return <Text>{item.item.key}</Text>;
}
}
};
</script>
<style>
.container {
top: 200px;
background-color: white;
align-items: center;
justify-content: center;
flex: 1;
}
</style>
<view
v-if="true"
:style="{flex: 1, justifyContent: 'center'}">
<activity-indicator size="large" color="#0000ff" />
</view>
<template>
<view class="container">
<button
:on-press="onPressLearnMore"
title="Learn More"
color="#841584"
accessibility-label="Learn more about this purple button"
/>
</view>
</template>
<script>
import { Alert } from "react-native";
export default {
data: function() {
return {};
},
methods: {
onPressLearnMore: function() {
Alert.alert(
"Alert Title",
"My Alert Msg",
[
{
text: "Ask me later",
onPress: () => console.log("Ask me later pressed")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
],
{ cancelable: false }
);
}
}
};
</script>
<template>
<view class="container">
<!-- thanh trạng thái thông báo -->
<status-bar background-color="blue" bar-style="light-content" />
<!-- switch bar bật tắt, tương tự checkbox -->
<switch :on-value-change="handleChange" :value="value" />
<!-- sự kiện click vào img chưa background -->
<touchable-opacity :on-press="onPressButton">
<image
:style="{alignItems: 'center', backgroundColor: '#DDDDDD'}"
:source="require('./assets/icon.png')"
/>
</touchable-opacity>
</view>
</template>
<script>
import { Alert } from "react-native";
export default {
data: function() {
return {
value: false
};
},
methods: {
handleChange: function(val) {
this.value = val;
console.log(val);
},
onPressButton: function() {
alert("Clicked Image");
}
}
};
</script>
<style>
.container {
top: 100px;
background-color: white;
align-items: center;
justify-content: center;
flex: 1;
}
</style>
