react-native - 如何在屏幕中间位置在 React-Native 上制作标签
问题描述
如何在屏幕中间位置在 React-Native 上制作标签。如果我使用标签,这意味着我只能在我想位于屏幕中间时将其放在屏幕上或下。我尝试使用导航,但它没有出现。谁能帮我?谢谢你
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, ScrollView,
ImageBackground, Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import IndividuScreen from './src/individu';
import UnitScreen from './src/unit';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
render() {
const Appss = createAppContainer(Apps);
return (
<ScrollView>
<View>
<View style={{ width: '100%', height: 60, backgroundColor: '#ed1c24', flexDirection: 'row' }}>
<Icon name="chevron-left" size={15} color={'white'} style={{ marginTop: 25, marginLeft: '3%' }} />
<Image
style={styles.logo}
source={require('./assets/img/icon.png')}
/>
<Icon name="check-square" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '30%' }} />
<Icon name="bell" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '4%' }} />
<Icon name="ellipsis-v" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '4%' }} />
</View>
<ImageBackground
source={require('./assets/img/gedung.png')}
style={{ width: '100%', height: 300, marginBottom: 0, marginTop: 0 }}>
<View style={{ marginTop: 230 }}>
<ScrollView horizontal={true}>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Beranda</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Training Saya</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Katalog</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Jadwal</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>XXXXXX</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>XXXXXX</Text>
</ScrollView>
</View>
</ImageBackground>
<Appss />
{/* Appss Not Show*/}
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row', marginTop: 20 }}>
<Image source={require('./assets/img/medal.png')} style={{ width: 30, height: 35, marginRight: "5%", }} />
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 20, paddingBottom: 10, fontWeight: 'bold' }}>Point CPD Anda: <Text style={{ color: 'red', fontSize: 30, }}>2</Text></Text>
<Text style={{ fontSize: 14, color: 'red' }}>LIHAT RINCIAN POINT CPD > </Text>
</View>
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<Image source={require('./assets/img/book.png')} style={{ width: 30, height: 30, marginRight: "5%", }} />
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Training Saya</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ marginLeft: "5%", marginRight: "15%", textAlignVertical: 'center' }}>
<Text style={{ height: 60, width: 60, borderWidth: 1.5, borderRadius: 50, fontSize: 30, textAlignVertical: 'center', textAlign: 'center', color: 'maroon', fontWeight: 'bold' }}>07</Text>
</View>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>KALENDER</Text>
<Text style={{ fontSize: 25, color: 'maroon', fontWeight: 'bold' }}>Selasa</Text>
<Text style={{ fontSize: 14 }}>SEPTEMBER 2018</Text>
</View>
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', paddingLeft: 15, paddingTop: 10, flexDirection: 'row' }}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>PRUprime healthcare</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>09:00 - 12:00</Text>
<Text style={{ fontSize: 14 }}>Prudential Learning Academy, Lt. 1</Text>
<Text style={{ fontSize: 14 }}>Jakarta</Text>
</View>
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: '40%' }} />
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', paddingLeft: 15, paddingTop: 10, flexDirection: 'row' }}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>PRUfast Start</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>14:00 - 17:30</Text>
<Text style={{ fontSize: 14 }}>Prudential Learning Academy, Lt. 1</Text>
<Text style={{ fontSize: 14 }}>Jakarta</Text>
</View>
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: '40%' }} />
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<Image source={require('./assets/img/book.png')} style={{ width: 30, height: 30, marginRight: "5%", }} />
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Status Belajar</Text>
</View>
<View style={{ textAlign: 'left', paddingLeft: 15 }}>
<Text>TECHNICAL SKILLS</Text>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<Text style={{ fontWeight: 'bold' }}>Syariah Basic Training</Text>
<Text style={{ marginLeft: 15, backgroundColor: 'orange', paddingLeft: 4, paddingRight: 4, color: 'white', fontStyle: 'italic' }}>e-learning</Text>
</View>
</View>
<View style={{ marginTop: 20, flexDirection: 'row' }}>
<Image source={require('./assets/img/progress4.png')} style={{ width: '100%', height: 60, }} />
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: 10 }} />
</View>
</View >
</ScrollView>
);
}
}
const Apps = createStackNavigator({
Individu: {
screen: IndividuScreen,
navigationOptions: {
header: null
}
}, Unit: {
screen: UnitScreen,
navigationOptions: {
header: null
}
}
});
const styles = StyleSheet.create({
logo: {
width: '35%',
height: 40,
marginTop: 10,
marginLeft: '3%',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
对于 IndividuScreen 和 UnitScreen 将在 App 上显示但不显示。如果我只返回个人和单位的应用程序出现。但如果我将它输入 TAG IndividuScreen 并且 UnitScreen 不会出现。也许你有办法在一个组件中显示两个屏幕。谢谢你
解决方案
推荐阅读
- javascript - 棘手的表单提交
- java - 立方体 3D 点旋转 X 和 Z
- elasticsearch - ElasticSearch 父/子查询需要将近 10 秒才能运行
- node.js - CubeJS如何在join中传递动态列名?
- java - 我正在尝试解决这个 leetcode 问题
- javascript - TypeError:无法读取 Vue.js 中 eval (dashboard.v1.vue?88bf:1465) 处未定义的属性 'gaugeData2'
- c++ - 如何从地图中删除矢量对象
- ios - 如何:格式化 Swift UI 按钮
- javascript - 错误:无法链接顶点和片段着色器
- python - PySpark - 大数据帧上的空指针异常