我是 react native 的新手,我真的被困在对齐两个工具栏按钮两天了!我需要使用 flex 将它们放在工具栏的右侧。但是,我不能那样做。这是代码:
export default class ToolbarHorizontal extends Component {
// component prop types
static propTypes = {
items: React.PropTypes.arrayOf(React.PropTypes.shape({
active: React.PropTypes.bool,
name: React.PropTypes.string.isRequired,
imageSourceActive: React.PropTypes.number.isRequired,
imageSourceInactive: React.PropTypes.number.isRequired,
onOpen: PropTypes.func,
})).isRequired,
toolbarActiveItem: React.PropTypes.string.isRequired,
forcedPath: React.PropTypes.bool,
forcedPathImageSource: React.PropTypes.number,
tintColor: React.PropTypes.string,
};
constructor(props) {
super();
this.toolbarActiveIndex = props.items.map((el) => el.name).indexOf(props.toolbarActiveItem);
}
render() {
const { items } = this.props;
let { toolbarActiveItem } = this.props;
let { forcedPath } = this.props;
let { forcedPathImageSource } = this.props;
let { tintColor } = this.props;
tintColor = (tintColor) ? tintColor : '#000'; // default value is black
return (
<View style={styles.container} >
<ScrollView
horizontal={true}
collapsable={true}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
style={styles.scroller}
>
<View style={styles.componentContainer}>
{ items.map((item, index) => {
let active = (item.active !== undefined) ? item.active : true; // default value is true
if (active) {
return(
<View key={item.id} style={styles.imageContianer}>
{(toolbarActiveItem == item.name) &&
<View style={styles.insideImageContainer}>
<Image
source={item.imageSourceSection}
style={styles.item}
/>
<Text size={20} style={{color:tintColor, paddingRight:10}}>{!forcedPath ? item.description : null}</Text>
</View>
}
</View>
);
}
}
)}
<View style={styles.buttomContainer}>
{ items.map((item, index) => {
//console.log('toolbarActiveItem == item.name:', toolbarActiveItem, '==', item.name);
let active = (item.active !== undefined) ? item.active : true; // default value is true
if (active && (!forcedPath || item.isVisibleWhenForcedPath)) {
return(
<View key={item.id} >
{item.isTouchable && forcedPath && index > 0 &&
<Image
source={forcedPathImageSource}
style={styles.forcedPathImage}
/>
}
{item.isTouchable &&
<TouchableOpacity onPress={() => {
if (!forcedPath) { // when forcedPath, buttons are never touchable
if (toolbarActiveItem != item.name) {
item.onOpen(item.name);
toolbarActiveItem = item.name;
}
else
{ // already on opened page, go back if button is pressed again
this.props.navigation.goBack();
}
}
}}>
{forcedPath &&
<Image
source={(toolbarActiveItem == item.name) ? item.imageSourceForcedPathActive : index > this.toolbarActiveIndex ? item.imageSourceForcedPathTobevisited : item.imageSourceForcedPathVisited}
style={styles.item}
/>
}
{!forcedPath &&
<Image
source={(toolbarActiveItem == item.name) ? item.imageSourceActive : item.imageSourceInactive}
style={styles.item}
/>
}
</TouchableOpacity>
}
</View>
);
}
}
)}
</View>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:0.16,
flexDirection:'row' ,
//backgroundColor: 'transparent',
},
componentContainer: {
flex:1,
flexDirection:'row',
alignContent:'center',
alignItems: 'center',
},
imageContianer: {
flex:1,
flexDirection:'row',
alignContent:'center',
alignItems:'center',
},
buttomContainer: {
flex:1,
flexDirection:'row',
// backgroundColor: '#9b59b6' ,
},
insideImageContainer: {
flex:1,
alignItems:'center',
flexDirection:'row',
},
scroller: {
marginHorizontal: 0,
marginVertical: 10,
},
item: {
width: 60,
height: 60,
//marginRight: 5,
margin: 2,
},
forcedPathImage: {
flex: 1,
width: 24,
height: 36,
resizeMode: 'contain',
},
});
事实上,问题在于,任何 flex 值的变化都不适用于insideImageContainer
or imageContianer
。你能帮我解决这个问题吗?提前致谢。