加载中…#React Native# 103页面导航，弹出框，理解属性<1>
(2017-10-25 16:03:14)| 分类： 计算机相关 |
1.分离组件与平台自适应
将一段Text View 分离成一个组件形式，如下代码：
import
React,
{
Component
}
from
'react'
import {
Platform,
View,
Text
} from 'react-native'
export default class RegisterLeaf extends Component {
render () {
return (
<</span>View>
<</span>Text>
{Platform.OS === 'android' ? 'Android' : 'IOS'}ceshi
</</span>Text>
</</span>View>
)
}
}
并在App.js中引用便可使用了。
import RegisterLeaf from './RegisterLeaf'; 在render 中直接引用
后面运行就会出现对应数据。
2.导航组件和注册组件
导航引用react-navigation
组件，https://reactnavigation.org/docs/intro/,官方网站为这个。
StackNavigator- Provides a way for your app to transition between screens where each new screen is placed on top of a stack. TabNavigator- Used to set up a screen with several tabs. DrawerNavigator- Used to set up a screen with drawer navigation。
里面需要安装 react-navigation
和 react-native-vector-icons
，npm install -g 全局安装，--save 会添加到package.json
文件中。
import React from 'react'
import { View, Text, Button } from 'react-native'
import { StackNavigator } from 'react-navigation'
const HomeScreen = ({navigation}) => (
<</span>View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<</span>Text>Home Screen</</span>Text>
<</span>Button
onPress={() => navigation.navigate('Details')}
title="Go to details"
/>
<</span>Button
style={{margin:10}}
onPress={() => navigation.navigate('Chat', {user: 'kitty'})}
title="Go to chat"
/>
</</span>View>
)
const DetailsScreen = (navigation) => (
<</span>View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<</span>Text>Details Screen</</span>Text>
</</span>View>
)
class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Chat with '+navigation.state.params.user
});
render() {
const { params } = this.props.navigation.state;
return (
<</span>View>
<</span>Text>Chat with {params.user}</</span>Text>
</</span>View>
);
}
}
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions:
{
headerTitle: 'Home'
}
},
Details: {
screen: DetailsScreen,
navigationOptions:
{
headerTitle: 'Details'
}
},
Chat:{
screen:ChatScreen,
}
})
export default RootNavigator
import React from 'react'
import { View, Text, Button } from 'react-native'
import { TabNavigator } from 'react-navigation'
import Ionicons from 'react-native-vector-icons/Ionicons'
const HomeScreen = ({navigation}) => (
<</span>View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<</span>Text>Home Screen</</span>Text>
<</span>Button
onPress={() => navigation.navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
</</span>View>
)
const ProfileScreen = () => (
<</span>View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<</span>Text>Profile Screen</</span>Text>
</</span>View>
)
const RootTabs = TabNavigator({
Home: {
screen: HomeScreen,
navigationOptions:
{
tabBarLabel: 'Home',
tabBarIcon: ({
tintColor, focused }) => (
<</span>Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{ color: tintColor }}
/>
)
}
},
Profile: {
screen: ProfileScreen,
navigationOptions:
{
tabBarLabel: 'Profile',
tabBarIcon: ({
tintColor, focused }) => (
<</span>Ionicons
name={focused ? 'ios-person' : 'ios-person-outline'}
size={26}
style={{ color: tintColor }}
/>
)
}
}
})
export default RootTabs
import React from 'react'
import { View, Text, Button } from 'react-native'
import { DrawerNavigator } from 'react-navigation' // 1.0.0-beta.14
import Ionicons from 'react-native-vector-icons/Ionicons'
// 4.4.2
const HomeScreen = ({navigation}) => (
<</span>View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<</span>Text>Home Screen</</span>Text>
<</span>Button
onPress={() => navigation.navigate('DrawerToggle')}
title="Open Drawer"
/>
</</span>View>
)
const ProfileScreen = () => (
<</span>View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<</span>Text>Profile Screen</</span>Text>
</</span>View>
)
const RootDrawer = DrawerNavigator({
Home: {
screen: HomeScreen,
navigationOptions:
{
drawerLabel: 'Home',
drawerIcon: ({
tintColor, focused }) => (
<</span>Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{ color: tintColor }}
/>
)
}
},
Profile: {
screen: ProfileScreen,
navigationOptions:
{
drawerLabel: 'Profile',
drawerIcon: ({
tintColor, focused }) => (
<</span>Ionicons
name={focused ? 'ios-person' : 'ios-person-outline'}
size={26}
style={{ color: tintColor }}
/>
)
}
}
})
export default RootDrawer
喜欢
0
赠金笔