本人最近在学习 RN,问题如下: 我创建了一个组件,用于显示一些东西,代码如下 app.js 内容如下
import SideMenu from 'react-native-side-menu'; import CameraList from '../pages/CamList';
export default class App extends Component{
render() {
return (
<SideMenu>
<CameraList />
</SideMenu>
);
}
}
CamList.js 内容如下
export default class CameraList extends Component {
render() {
return (
<ScrollView
style={{ padding:8 }}
automaticallyAdjustContentInsets={false}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={this.onRefresh}
title="Loading..."
colors={['#ffaa66cc', '#ff00ddff', '#ffffbb33', '#ffff4444']}
/>
}
>
<View style={styles.bordershadow}>
<View style={{height:200, backgroundColor:'red', justifyContent:'flex-end'}}>
<Text style={{color:'#fff', fontSize:12}}>aabbcc</Text>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({ bordershadow:{ shadowOffset:{ width:2, height:2 }, shadowColor:'black', shadowOpacity:0.2, shadowRadius:1, } });
为了凸显问题,我简化了一些不必要的引用 问题来了,我发现 app.js 中,如果我加上 SideMenu 标签,会导致 CamList.js 文件中的所有的元素在显示的时候都有 shadow 的效果 而实际上我只想让最外层的 View 添加 bordershadow css 有 shadow 的阴影效果,而实际上不加 SideMenu 标签,代码运行也没什么问题,我研究了很长时间,没搞明白是什么问题 请各位赐教,哪怕只是一个思路,谢谢!