gpt4 book ai didi

javascript - 使用react-native的自定义选项卡

转载 作者:行者123 更新时间:2023-12-02 14:28:02 24 4
gpt4 key购买 nike

我已经在react-native中创建了自定义选项卡,但无法选择选项卡。我已经初始化了所选选项卡的状态,但不知道在哪里设置状态。

这是我的代码:

'use strict';

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View
} from 'react-native';
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
var bg = require('image!bg');

class TabView extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'list',
selectedTab: 'map'
};
}
render() {

return (
<View style={styles.container}>
<Image style={styles.bg} source={bg} />
<View style={styles.tabView}>
<View style={[styles.listView,styles.selectedView]}>
<Text>List View</Text>
</View>
<View style={[styles.listView,{}]}>
<Text>Map View</Text>
</View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
},
bg: {
position: 'absolute',
left: 0,
top: 0,
width: windowSize.width,
height: windowSize.height
},
tabView: {
flexDirection: 'row',
//bottom: 200,
borderWidth:2,
borderColor:'rgba(4, 193, 3,1)',
borderRadius: 5,
marginHorizontal: 20,
marginTop: 50
},
listView: {
flex: 2,
padding:7,
alignItems:'center'
},
mapView: {
flex: 2,
padding:7,
alignItems:'center'
},
selectedView: {
backgroundColor:'rgba(4, 193, 3,1)',
color: 'white'
}
});

module.exports = TabView

我只是想知道我应该在哪里添加检查,以便我可以在所选选项卡中做出改变

任何帮助将不胜感激。

最佳答案

请查看此处的代码,了解如何完成

const Tab = (props) => {
let style = props.isSelected && styles.selectedTab || styles.normalTab;

return (
<View style={style}>
<TouchableHighlight onPress={() => props.onTabPress(props.id)}>
<Text>{props.title}</Text>
</TouchableHighlight>
</View>
)
}


class TabsView extends Component {
constructor(props) {
super(props)
this.state = {
selectedTab: 'one'
}
}

render() {
return (
<View>
<Tab onTabPress={this.onSelectTab.bind(this)} title="One" id="one" isSelected={this.state.selectedTab == "one"}/>
<Tab onTabPress={this.onSelectTab.bind(this)} title="Two" id="two" isSelected={this.state.selectedTab == "two"}/>
</View>
)
}

onSelectTab(selectedTab) {
this.setState({ selectedTab })
}
}

上面的代码将您的组件分为两部分,逻辑部分(TabsView)和愚蠢的表示部分(Tab)

逻辑处理 clickHandler (onSelectTab),它作为 prop (onTabPress) 传递给哑 (Tab) 组件。

关于javascript - 使用react-native的自定义选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38052120/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com