react-navigation TabNavigator使用

`import React,{Component}from "react"; import {AppRegistry,Text,View,Button,Image,StyleSheet} from "react-native"; import {StackNavigator,TabNavigator} from "react-navigation";

class ChatScreen extends Component{ static navigationOptions = ({ navigation }) => { const {state,setParams} = navigation; const isInfo = state.params.mode === "info"; const {user} = state.params; return { title: isInfo ? ${user}'s Contact Info : Chat with ${state.params.user},headerRight: ( <Button title={isInfo ? "Done" : ${user}'s info} onPress={() => setParams({ mode: isInfo ? "none" : "info"})} /> ),}; }; render(){ const {params} = this.props.navigation.state; return (<View><Text>Chat with {params.user}</Text></View>); } }

class RecentChatScreen extends Component{ static navigationOptions = { title : "ni",tabBarLabel : "图书",tabBarIcon: ({tintColor }) => ( <Image source={require("./image/book.png")} style={[styles.icon,{tintColor :tintColor }]} /> ),}; render(){ return ( <View><Text>List of recent chats</Text> <Button onPress={() => this.props.navigation.navigate("Chat",{ user: "Lucy" })} title="Chat with Lucy" /> </View>); } }

class AllContactsSreen extends Component{ static navigationOptions = { tabBarLabel : "电影",tabBarIcon : ({tintColor}) => ( <Image source = {require("./image/movie.png")} style = {[styles.icon,}; render(){ return ( <View><Text>List of all contacts</Text> <Button onPress={() => this.props.navigation.navigate("Chat",{ user: "Lucy" })} title="Chat with Lucy" /> </View>); } }

const styles = StyleSheet.create({ icon: { width: 26,height: 26,},});

const MainScreenNavigator = TabNavigator({ Recent : {screen:RecentChatScreen},All:{screen:AllContactsSreen} },{ tabBarPosition:"bottom",// animationEnabled:false,// swipeEnabled:false,tabBarOptions: { // activeTintColor:"red",// inactiveTintColor:"black",pressColor : "yellow",showIcon : true,labelStyle: { fontSize: 16,} } }); MainScreenNavigator.navigationOptions = { // title: "My Chats",}; const ReactNativeDemo = StackNavigator({ Home:{screen:MainScreenNavigator},Chat:{screen:ChatScreen} });

AppRegistry.registerComponent("ReactNativeDemo",()=>ReactNativeDemo);`

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!