如何在同一个屏幕中更改视图（React Native）？
[英]How to change views within the same screen (React Native)?
问题描述
I want to duplicate the following with react-native-scrollable-tab-view: 
我想使用react-native-scrollable-tab-view复制以下内容：
Currently my code is the following, but I am not sure how to execute and incorporate the module to make things easier - does anyone have any ideas on how I can implement this? 目前我的代码如下，但我不确定如何执行和合并模块以使事情变得更容易 - 有没有人对如何实现这一点有任何想法？ (I am a novice so any help is appreciated): （我是新手，所以任何帮助表示赞赏）：
This is the main (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;
This is the recipes view when you click on the recipes tab: 单击配方选项卡时，这是配方视图：
'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;
And this is the recipe details view: 这是食谱细节视图：
'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;
Currently, all of this looks like this: 目前，所有这些都是这样的：
2 个解决方案
解决方案1
4 2015-09-07 12:49:47
What I would do is I'd create an array of objects with each object representing the different views/components in your footer slider thing. 我要做的是创建一个对象数组，每个对象代表页脚滑块中的不同视图/组件。 Then, have a property on your state which is the active tab and when a user clicks on a new tab, update the active tab to be whatever the new index is. 然后，在您的状态上有一个属性，它是活动选项卡，当用户单击新选项卡时，将活动选项卡更新为新索引。 What we're going to do is, whatever the active tab is, grab that specific component that you had in the tabMap you made above and render it. 我们要做的是，无论活动标签是什么，抓住您在上面制作的tabMap中具有的特定组件并进行渲染。 The code will look something like this. 代码看起来像这样。
var tabMap = [
{key: 0, icon: 'ion|ios-contact-outline', state: 'bio', asArray: false, Component: About},
{key: 1, icon: 'ion|ios-paper', state: 'posts', asArray: true, Component: Posts},
{key: 2, icon: 'ion|ios-people', state: 'friends', asArray: false, Component: Friends},
{key: 3, icon: 'ion|ios-heart', state: 'activity', asArray: false, Component: Activity},
];
So that represents that different tabs in the lower section. 这表示下半部分中的不同选项卡。
getInitialState(){
return {
activeTab: 0
}
}
That's my initial state which is going to keep track of which tab I'm on. 这是我的初始状态，它将跟踪我所在的选项卡。
Then in my render method I grab the component of the current active tab, 然后在我的渲染方法中，我抓住当前活动选项卡的组件，
var BodyComponent = tabMap[this.state.activeTabIndex].Component;
Now that I have the component, I can simply render BodyComponent passing in whatever data I would like. 现在我有了组件，我可以简单地渲染BodyComponent传入我想要的任何数据。
<BodyComponent
header={tabMap[this.state.activeTabIndex].header}
authedUser={this.props.authedUser}
isGuest={this.props.isGuest}
userToRender={this.state.userToRender}
data={this.state[tabMap[this.state.activeTabIndex].state]} />
解决方案2
2 已采纳 2015-09-29 11:55:55
It was missed feature of react-native-router-flux (to switch between 'tabs' within one container) and I've added it recently, please check latest version. 它错过了react-native-router-flux的功能（在一个容器内切换'tabs'）我最近添加了它，请检查最新版本。
You need to use Container element and define your routes inside it. 您需要使用Container元素并在其中定义您的路由。 Also you have to define TabBar implementation to use with that container (check Example with its TabBarFlux) 此外，您还必须定义TabBar实现以与该容器一起使用（请查看示例及其TabBarFlux）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在React Native中首次单击时同时更改屏幕和setState - How to change screen and setState at the same time on first click in React Native
React Native：如何将屏幕更改/导航为子组件？ - React Native: How to change/navigate the Screen as a Childcomponent?
如何导航到 React Native class 中的屏幕？ - How do I navigate to a screen within a React Native class?
react-native中屏幕变化时如何实现回调函数？ - How to implement callBack function when screen change in react-native?
用户登录React Native后如何更改初始屏幕？ - How to change initial screen after user is logged in in react native?
如何在 React Native 的同一行中放置两个按钮？ - How to place two buttons within the same row in react native?
React native - x 秒后更改屏幕 - React native - Change screen after x seconds
使用布尔 React Native 在我的屏幕中更改渲染 - Change render in my screen with boolean React Native
在 React Native 中打开屏幕更改模式 - Opening modal on screen change in React Native
如何在同一导航器中有条件地更改不同反应本机屏幕的 screenOptions？ - How to conditionally change screenOptions for different react native screens in the same Navigator?
相关标签