网上很多都是老版本的使用方法，新版本已经不一样了。
首先奉上链接React Navigation
首先创建项目啥的 我就不说了。
然后安装React Navigation方法官网链接
其中有一步安装 react-navigation-stack
别忘了
创建一个App.js
import React, {
Component
} from 'react';
import {
createAppContainer
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './src/Home';
import ImagePickViewer from './src/components/imageViewer/ImagePickViewer'
const RootStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
title: '123',
}),
},
ImagePickViewer: { screen: ImagePickViewer },
},
{
initialRouteName: 'Home',
headerMode: 'none'
},
);
const AppContainer = createAppContainer(RootStack)
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
在其中创建导航栏和声明导航栏里的组件有哪些。
其中initialRouteName是初始化路由
headerMode是导航栏样式，我代码里是把它取消了。
Home.js
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, FlatList, Modal } from 'react-native';
import StatusView from './components/StatusView'
import Swiper from 'react-native-swiper'
import GlobalStyles from './utils/GlobalStyles'
import Focus from '.././src/components/home/Focus'
import PicTextCell from '.././src/components/home/PicTextCell'
import { NavigationActions } from 'react-navigation';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
titleList: ['发现', '关注'],
currentIndex: 0
};
}
render() {
return (
<View style={styles.container}>
<StatusView></StatusView>
<View style={styles.titleView}>
{
this.state.titleList.map((item, index) => {
return (<Text key={item} style={this.state.currentIndex == index ? styles.fontBig : styles.fontNormal} onPress={() => {
this.press(index)
}}>{item}</Text>)
}
)
}
</View>
<FlatList data={["1", "2", "3", "1", "2", "3", "1", "2", "3"]} renderItem={(item) => {
switch (item.index) {
case 0:
return (<View style={styles.swiperView}>
<Swiper style={styles.swiper} height={200} width={GlobalStyles.window_width}>
<View style={styles.slide}>
<Image style={styles.image} style={{ width: GlobalStyles.window_width - 40, height: 130 }}
source={{ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' }}></Image>
</View>
<View style={styles.slide}>
<Image style={styles.image} style={{ width: GlobalStyles.window_width - 40, height: 130 }}
source={{ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' }}></Image>
</View>
<View style={styles.slide}>
<Image style={styles.image} style={{ width: GlobalStyles.window_width - 40, height: 130 }}
source={{ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' }}></Image>
</View>
</Swiper>
</View>)
break;
case 1:
return (<Focus data={["关注", "已关注", "已关注"]}></Focus>)
break
default:
return (<PicTextCell style={styles.picTextCell} imageurls={[
{
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
},
{
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
},
{
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
}]} showPic={(index) => { this.showPic(index) }}></PicTextCell>)
break;
}
}} />
</View >
);
}
press(index) {
this.setState({
currentIndex: index
})
}
showPic(index) {
const navigateAction = NavigationActions.navigate({
routeName: 'ImagePickViewer',
params: {},
// navigate can have a nested navigate action that will be run inside the child router （navigate 可以用有一个嵌套的navigate 操作）
action: NavigationActions.navigate({ routeName: 'ImagePickViewer' }),
});
this.props.navigation.dispatch(navigateAction);
// this.props.navigation.navigate('ImagePickViewer')
}
}
const styles = StyleSheet.create({
fontBig: {
width: 50,
fontSize: 21,
fontWeight: 'bold'
},
fontNormal: {
width: 40,
fontSize: 16,
},
container: {
flex: 1,
},
titleView: {
flexDirection: 'row',
alignItems: 'flex-end',
marginLeft: 20,
marginRight: 20,
},
swiper: {
marginTop: 20,
},
image: {
},
slide: {
alignItems: 'center',
width: GlobalStyles.window_width,
height: 200
},
swiperView: {
height: 200
},
})
export default Home;
其中PicTextCell是一个组件
PicTextCell.js
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import RNIcon from "../RNIcon";
import GlobalStyles from '../../utils/GlobalStyles'
export default class PicTextCell extends Component {
constructor(props) {
super(props);
this.state = {
};
}
static navigationOptions = {
title: 'React Native组件大全',
};
render() {
return (
<View style={styles.container}>
<View style={[styles.horView]}>
<Image style={styles.image} source={{ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' }}></Image>
<View style={styles.betweenView}>
<View style={styles.horView}>
<Text>名字</Text>
<RNIcon style={styles.leftIcon} name='dengdai' size={15} color='red'></RNIcon>
<RNIcon style={styles.leftIcon} name='fensi' size={15} color='red'></RNIcon>
</View>
<View style={[styles.horView, styles.betweenView, styles.opView]}>
<Text style={styles.smallFont}>3分钟前</Text>
<View style={[styles.horView, styles.betweenView]}>
<RNIcon style={styles.icon} name='shoucang' size={13} color='#999999'></RNIcon>
<Text style={styles.smallFont}>1000</Text>
<RNIcon style={styles.icon} name='zan' size={13} color='#999999'></RNIcon>
<Text style={styles.smallFont}>2000</Text>
<RNIcon style={styles.icon} name='pinglun1' size={13} color='#999999'></RNIcon>
<Text style={styles.smallFont}>3000</Text>
</View>
</View>
</View>
</View>
<Text style={styles.content}>置换是photoshop里面非常容易忽视的一个滤镜。它作用是根据一张置换图颜色通道的不同色值从而将像素点移动不同的距离。</Text>
<View style={[styles.horView, styles.betweenView, styles.picView]}>
{
this.props.imageurls.map((item, index) => {
return (
<TouchableOpacity onPress={this.press.bind(this, index)}>
<Image style={styles.pic} source={{ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' }} ></Image>
</TouchableOpacity>
)
})
}
</View>
</View>
);
}
press = (index) => {
this.props.showPic(index)
}
}
const styles = StyleSheet.create({
image: {
width: 36,
height: 36,
marginLeft: 13,
marginRight: 13,
borderRadius: 18,
},
horView: {
flexDirection: 'row',
},
betweenView: {
justifyContent: 'space-between',
},
centerView: {
justifyContent: 'center',
},
opView: {
width: GlobalStyles.window_width - 80,
marginRight: 20,
},
icon: {
marginLeft: 5,
marginRight: 5
},
leftIcon: {
marginLeft: 3,
},
smallFont: {
fontSize: 12,
lineHeight: 16,
color: '#999999'
},
content: {
margin: 13,
marginTop: 8,
fontSize: 15,
color: '#666666',
letterSpacing: 0.5
},
pic: {
width: (GlobalStyles.window_width - 26 - 20) / 3,
height: 85,
borderRadius: 5
},
picView: {
marginLeft: 13,
marginRight: 13,
marginBottom: 10
},
container: {
marginTop: 15,
borderBottomWidth: 0.8,
borderBottomColor: '#C7C7C7'
}
})
Demo地址Github（其中还有与iOS原生交互内容具体见下文）
网友评论