ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

javascript – 如何在同一个屏幕中更改视图(React Native)？

2019-05-16 22:24:50  阅读：168  来源： 互联网

标签：javascript ios react-native tabbar


我想使用react-native-scrollable-tab-view复制以下内容：

目前我的代码如下,但我不确定如何执行和合并模块以使事情变得更容易 – 有没有人对如何实现这一点有任何想法？ (我是新手,所以任何帮助表示赞赏)：

这是主要的(标签视图)：

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var Icon = require('react-native-vector-icons/FontAwesome');
var Restaurants = require('../Helpers/Restaurants');
var More = require('../Helpers/More');
var api = require('../Api/Api');
var Profile = require('../Helpers/Profile');
var Recipes = require('../Helpers/Recipes');
var Actions = require('react-native-router-flux').Actions;
var Home = require('../Helpers/Home');

var {
  StyleSheet,
  Text,
  View,
  Image, 
  TabBarIOS,
  Component
} = React;


class Main extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'home',
      notifCount: 0,
      presses: 0,
    };
  }

  GoBack() {
    this.props.navigator.pop();
  }

  render() {
    return (
      <TabBarIOS 
        tintColor="#49B64D"
        barTintColor="rgba(255,255,255,0.3)"
        selectedTab={this.state.selectedTab}>
        <Icon.TabBarItem
          selected={this.state.selectedTab === 'home'}
          icon={require('image!homeicon')}
          onPress={() => {
              this.setState({
                  selectedTab: 'home',
              });
          }}>
            <Home/>
        </Icon.TabBarItem>
        <Icon.TabBarItem
          selected={this.state.selectedTab === 'restaurants'}
          icon={require('image!nomicon')}
          onPress={() => {
                this.setState({
                    selectedTab: 'restaurants',
                });
          }}>
          <Restaurants/>
        </Icon.TabBarItem>
       <Icon.TabBarItem
          selected={this.state.selectedTab === 'recipes'}
          icon={require('image!haticon')}
          onPress={() => {
                this.setState({
                    selectedTab: 'recipes',
                });
          }}>
          <Recipes/>
        </Icon.TabBarItem>
        <Icon.TabBarItem
          selected={this.state.selectedTab === 'profile'}
          icon={require('image!accounticon')}
          onPress={() => {
                this.setState({
                    selectedTab: 'profile',
                });
          }}>
          <Profile/>
        </Icon.TabBarItem>
      </TabBarIOS>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  bgImage: {
    flex: 1,
    width: window.width,
    resizeMode: 'cover',
  },
});

module.exports = Main;

单击配方选项卡时,这是配方视图：

'use strict';
var React = require('react-native');
var Seperator = require('./Seperator');
var api = require('../Api/Api');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var LinearGradient = require('react-native-linear-gradient');
var Swipeout = require('react-native-swipeout');
var List = require('./List');
var RecipeDetails =  require('./RecipeDetails');
var Actions = require('react-native-router-flux').Actions;


var {
  ScrollView,
  Text,
  View,
  TouchableHighlight,
  StyleSheet,
  Image,
  ListView,
  NavigatorIOS,
} = React;

var styles = StyleSheet.create({
  description: {
    fontSize: 20,
    textAlign: 'center',
    color: '#FFFFFF'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5,
    opacity: 0.9,
    height: window.width,
  },
  dietText: {
    color:'white',
    fontFamily: 'Avenir Next', 
    alignSelf:'center',
  },
  title: {
    textAlign:'left', 
    marginTop: (window.width/1.4), 
    fontSize: 20, 
    color: 'white', 
    fontFamily: 'Avenir Next', 
    fontWeight: '500',
  },
  dietbuble: {
    backgroundColor:'transparent', 
    height:20, 
    width:60, 
    borderRadius: 10, 
    backgroundColor:'#49B64D',
    marginRight:5,
  },
  nombtn: {
    height: 30,
    width: 30,
    marginBottom: 5,
  }, 
  arrow: {
    height: 15,
    width: 15,
    marginRight: 20,
    marginTop: 5,
  }, 
  upvotenum: {
    marginRight: 5, 
    fontSize: 20, 
    fontWeight: "600",
    color: 'white',
    fontFamily: 'Avenir Next'
  }, 
  dish_num: {
    backgroundColor:'#49B64D',
    height: 30,
    width: 100,
    marginLeft: window.width/1.36,
    borderRadius: 5,
  },
  dishtext: {
    fontFamily: "Avenir Next",
    fontSize: 20,
    fontWeight: "400",
    textAlign: 'center',
    color:"white",
  },
  profilebubble: {
    width: 40,
    height: 40,
    borderRadius: 20,
    margin: 2,
  }
});

var list = [
  {
    component: <List/>
  }
]

class Recipes extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      venues: new Object(),
    };
  }

  activateHome() {
    api.getAnything(this.props.paleo,this.props.vegan,this.props.vegetarian,this.props.healthy,this.props.dairyfree,this.props.nutfree,this.props.glutenfree)
      .then((res) => {
        console.log(res);
        return res;
    });
  }

  detailsRecipe() {
    this.props.navigator.push ({
        component: RecipeDetails,
        title: "",
    })
  }

  render(){ 

    return (
      <ScrollView
        alwaysBounceVertical={true}
        scrollEventThrottle={200}>
        <Swipeout right={list}>
            <View style={styles.container}>
                <Image source={{uri: 'http://i.huffpost.com/gadgets/slideshows/404432/slide_404432_5031844_free.jpg'}} style={{width: window.width, height: window.width}}>
                  <View style={{backgroundColor: 'transparent', marginBottom: 100,}}>
                    <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                      <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                        <Image source={{uri: 'http://cookieandkate.com/images/2014/02/kate-600.jpg'}} style={styles.profilebubble}/>
                        <Image source={{uri: 'http://www.thetimes.co.uk/tto/multimedia/archive/00851/82ef9ae8-ae34-11e4-_851122b.jpg'}} style={styles.profilebubble}/>
                      </View>
                    </View>
                    <LinearGradient colors={['transparent', 'transparent', '#1C1C1C']} style={styles.linearGradient}>
                        <TouchableHighlight onPress={Actions.recipedetails} underlayColor='transparent'>
                          <View style={{backgroundColor:'transparent', height: window.width, marginTop:-20}}>
                            <Text style={styles.title}>Recipe Name | 10 Mins</Text>
                          </View>
                        </TouchableHighlight>
                        <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent', marginTop: -75}}>
                           <View style={styles.dietbuble}>
                              <Text style={styles.dietText}>Vegan</Text>
                           </View>
                           <View style={styles.dietbuble}>
                              <Text style={styles.dietText}>Vegie</Text>
                           </View>
                           <View style={{flex: 1, flexDirection: 'row', marginLeft: window.width/3, backgroundColor: 'transparent'}}>
                             <Text style={styles.upvotenum} >20</Text>
                             <Image style={styles.arrow} source={require('image!upvotearrow')}></Image>
                             <Image style={styles.nombtn} source={require('image!nombtn')}></Image>
                            </View>
                        </View>
                      </LinearGradient>
                    </View>
                </Image>
            </View>
        </Swipeout>
        <Seperator/>
        <Swipeout right={list}>
            <View style={styles.container}>
                <Image source={{uri: 'http://www.funkinutt.com/wp-content/uploads/2013/06/Vegan-Scallops-Sophies-Kitchen.jpg'}} style={{width: window.width, height: window.width}}>
                  <View style={{backgroundColor: 'transparent', marginBottom: 100,}}>
                    <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                      <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                        <Image source={{uri: 'http://cookieandkate.com/images/2014/02/kate-600.jpg'}} style={styles.profilebubble}/>
                        <Image source={{uri: 'http://www.thetimes.co.uk/tto/multimedia/archive/00851/82ef9ae8-ae34-11e4-_851122b.jpg'}} style={styles.profilebubble}/>
                      </View>
                    </View>
                    <LinearGradient colors={['transparent', 'transparent', '#1C1C1C']} style={styles.linearGradient}>
                        <TouchableHighlight onPress={Actions.recipedetails} underlayColor='transparent'>
                          <View style={{backgroundColor:'transparent', height: window.width, marginTop:-20}}>
                            <Text style={styles.title}>Recipe Name | 10 Mins</Text>
                          </View>
                        </TouchableHighlight>
                        <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent', marginTop: -75}}>
                           <View style={styles.dietbuble}>
                              <Text style={styles.dietText}>Vegan</Text>
                           </View>
                           <View style={styles.dietbuble}>
                              <Text style={styles.dietText}>Vegie</Text>
                           </View>
                           <View style={{flex: 1, flexDirection: 'row', marginLeft: window.width/3, backgroundColor: 'transparent'}}>
                             <Text style={styles.upvotenum} >20</Text>
                             <Image style={styles.arrow} source={require('image!upvotearrow')}></Image>
                             <Image style={styles.nombtn} source={require('image!nombtn')}></Image>
                            </View>
                        </View>
                      </LinearGradient>
                    </View>
                </Image>
            </View>
        </Swipeout>
        <Seperator/>
        <Swipeout right={list}>
            <View style={styles.container}>
                <Image source={{uri: 'http://m5.paperblog.com/i/37/370315/guest-blogger-vegan-richa-samosa-and-onion-bh-L-KmHfF4.jpeg'}} style={{width: window.width, height: window.width}}>
                  <View style={{backgroundColor: 'transparent', marginBottom: 100,}}>
                    <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                      <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                        <Image source={{uri: 'http://cookieandkate.com/images/2014/02/kate-600.jpg'}} style={styles.profilebubble}/>
                        <Image source={{uri: 'http://www.thetimes.co.uk/tto/multimedia/archive/00851/82ef9ae8-ae34-11e4-_851122b.jpg'}} style={styles.profilebubble}/>
                      </View>
                    </View>
                    <LinearGradient colors={['transparent', 'transparent', '#1C1C1C']} style={styles.linearGradient}>
                        <TouchableHighlight onPress={Actions.recipedetails} underlayColor='transparent'>
                          <View style={{backgroundColor:'transparent', height: window.width, marginTop:-20}}>
                            <Text style={styles.title}>Recipe Name | 10 Mins</Text>
                          </View>
                        </TouchableHighlight>
                        <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent', marginTop: -75}}>
                           <View style={styles.dietbuble}>
                              <Text style={styles.dietText}>Vegan</Text>
                           </View>
                           <View style={styles.dietbuble}>
                              <Text style={styles.dietText}>Vegie</Text>
                           </View>
                           <View style={{flex: 1, flexDirection: 'row', marginLeft: window.width/3, backgroundColor: 'transparent'}}>
                             <Text style={styles.upvotenum} >20</Text>
                             <Image style={styles.arrow} source={require('image!upvotearrow')}></Image>
                             <Image style={styles.nombtn} source={require('image!nombtn')}></Image>
                            </View>
                        </View>
                      </LinearGradient>
                    </View>
                </Image>
            </View>
        </Swipeout>
        <Seperator/>
        <Swipeout right={list}>
            <View style={styles.container}>
                <Image source={{uri: 'http://www.choosingraw.com/wp-content/uploads/2014/09/IMG_8328.jpg'}} style={{width: window.width, height: window.width}}>
                  <View style={{backgroundColor: 'transparent', marginBottom: 100,}}>
                    <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                      <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                        <Image source={{uri: 'http://cookieandkate.com/images/2014/02/kate-600.jpg'}} style={styles.profilebubble}/>
                        <Image source={{uri: 'http://www.thetimes.co.uk/tto/multimedia/archive/00851/82ef9ae8-ae34-11e4-_851122b.jpg'}} style={styles.profilebubble}/>
                      </View>
                    </View>
                    <LinearGradient colors={['transparent', 'transparent', '#1C1C1C']} style={styles.linearGradient}>
                        <TouchableHighlight onPress={Actions.recipedetails} underlayColor='transparent'>
                          <View style={{backgroundColor:'transparent', height: window.width, marginTop:-20}}>
                            <Text style={styles.title}>Recipe Name | 10 Mins</Text>
                          </View>
                        </TouchableHighlight>
                        <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent', marginTop: -75}}>
                           <View style={styles.dietbuble}>
                              <Text style={styles.dietText}>Vegan</Text>
                           </View>
                           <View style={styles.dietbuble}>
                              <Text style={styles.dietText}>Vegie</Text>
                           </View>
                           <View style={{flex: 1, flexDirection: 'row', marginLeft: window.width/3, backgroundColor: 'transparent'}}>
                             <Text style={styles.upvotenum} >20</Text>
                             <Image style={styles.arrow} source={require('image!upvotearrow')}></Image>
                             <Image style={styles.nombtn} source={require('image!nombtn')}></Image>
                            </View>
                        </View>
                      </LinearGradient>
                    </View>
                </Image>
            </View>
        </Swipeout>
        <Seperator/>
      </ScrollView>
    )
  }
};


module.exports = Recipes;

这是食谱细节视图：

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var LinearGradient = require('react-native-linear-gradient');
var Tabbar = require('react-native-tabbar');
var Item = Tabbar.Item;
var {
  StyleSheet,
  View,
  Text,
  Component, 
  Image, 
  ScrollView, 
  TouchableHighlight,
} = React;

var styles = StyleSheet.create({
  description: {
    fontSize: 20,
    textAlign: 'center',
    color: '#FFFFFF'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  }, 
  venue_image: {
    width: window.width, 
    height: window.height/4, 
    flex: 1, 
  }, 
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    opacity: 0.9,
    height: window.height/3.7, 
  },
  title: {
    textAlign:'left', 
    fontSize: 15, 
    color: 'white', 
    fontFamily: 'Avenir Next', 
    fontWeight: '500',
  },
  nombtn: {
    height: 30,
    width: 30,
    marginBottom: 5,
  }, 
  arrow: {
    height: 15,
    width: 15,
    marginRight: 20,
    marginTop: 5,
  }, 
  upvotenum: {
    marginRight: 5, 
    fontSize: 20, 
    fontWeight: "600",
    color: 'white',
    fontFamily: 'Avenir Next'
  }, 
  dietbuble: {
    backgroundColor:'transparent', 
    height:20, 
    width:60, 
    borderRadius: 10, 
    backgroundColor:'#49B64D',
    marginRight:5,
  },
  submenutext: {
    fontFamily: 'Avenir Next',
    fontSize: 15,
    fontWeight: '600', 
    color: 'white',
    alignSelf: 'center', 
    marginTop: 10,
  }, 
  undernum: {
    fontFamily: 'Avenir Next',
    fontSize: 30,
    fontWeight: '400', 
    color: 'white',
    alignSelf: 'center', 
  }, 
  units: {
    fontFamily: 'Avenir Next',
    fontSize: 10,
    color: 'white',
    alignSelf: 'center',
  }
});

class VenueDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'ingredients',
    };
  }

  _Directions() {
    this.setState({selectedTab: 'directions'});
    console.log(this.state.selectedTab);
  }

  _Nutrition() {
     this.setState({selectedTab: 'nutrition'});
     console.log(this.state.selectedTab);
  }

  _Ingredients() {
    this.setState({selectedTab: 'ingredients'});
    console.log(this.state.selectedTab);
  }

  makeBackground(btn){
    var featurebox = {
     flex: 1,
     height: window.width/4,
     width: window.width/3,
     alignItems: 'center',
     justifyContent: 'center',
    }
    if(btn === 0 || btn === 2){
      featurebox.backgroundColor = '#49B64D';
    } else if (btn === 1){
      featurebox.backgroundColor = '#585858';
    } 
    return featurebox;
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.container}>
            <Image source={{uri: 'http://i.huffpost.com/gadgets/slideshows/404432/slide_404432_5031844_free.jpg'}} style={styles.venue_image}>
              <LinearGradient colors={['transparent', 'transparent', '#1C1C1C']} style={styles.linearGradient}>
                <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent', marginTop: window.height/4.3}}>
                   <View style={{backgroundColor:'transparent', marginRight: window.width/4, marginLeft: 10}}>
                      <Text style={styles.title}>Recipe Name | 10 Mins</Text>
                   </View>
                   <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
                     <Text style={styles.upvotenum} >20</Text>
                     <Image style={styles.arrow} source={require('image!upvotearrow')}></Image>
                     <Image style={styles.nombtn} source={require('image!nombtn')}></Image>
                    </View>
                </View>
               </LinearGradient>
            </Image>
        </View>
        <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'transparent'}}>
            <TouchableHighlight 
              onPress={this._Ingredients.bind(this)}
              style={this.makeBackground(0)}
              underlayColor='transparent'>
              <View>
                <Text style={styles.submenutext}>Ingredients</Text>
                <Text style={styles.undernum}>5</Text>
                <Text style={styles.units}>Count</Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight 
               onPress={this._Nutrition.bind(this)}
               style={this.makeBackground(1)}
               underlayColor='transparent'>
              <View>
                <Text style={styles.submenutext}>Nutrition</Text>
                <Text style={styles.undernum}>200</Text>
                <Text style={styles.units}>Sugars</Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight 
              onPress={this._Directions.bind(this)}
              style={this.makeBackground(2)}
              underlayColor='transparent'>
              <View>
                <Text style={styles.submenutext}>Directions</Text>
                <Text style={styles.undernum}>10</Text>
                <Text style={styles.units}>Hours</Text>
              </View>
            </TouchableHighlight>
        </View>
        <ScrollView>
        </ScrollView>
      </View>
    );
  }
}

module.exports = VenueDetails;

目前,所有这些都是这样的：

解决方法:

它错过了react-native-router-flux的功能(在一个容器内切换’tabs’)我最近添加了它,请检查最新版本.

您需要使用Container元素并在其中定义您的路由.此外,您还必须定义TabBar实现以与该容器一起使用(请查看示例及其TabBarFlux)

标签：javascript,ios,react-native,tabbar
来源： https://codeday.me/bug/20190516/1116964.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有