我想使两个图像彼此相邻,这是我的观点:
function MyView(props) {
return (
<View style={{ flex: 1, }}>
<View style={{
// width: 230,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<ExternalLink href="https://play.google.com/store/apps/details">
<Image
source={availableAtGooglePlayImage}
style={{
width: '100%',
height: 70,
flex: 1,
marginTop: 10,
resizeMode: 'contain',
}}
/>
</ExternalLink>
</View>
<View style={{
// width: 230,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<ExternalLink href="https://itunes.apple.com/fr/app">
<Image
resizeMode="stretch"
source={availableAtAppStoreImage}
style={{
width: '100%',
height: 70,
flex: 1,
marginTop: 10,
resizeMode: 'contain',
}}
/>
</ExternalLink>
</View>
);
}
一旦在flex: 1
的父视图上使用ExternalLink
,图像就会消失。
我还没有找到一种方法来使这两个图像彼此相邻。
我只找到一种方法来使它们位于上方,并且整个宽度都是可单击的,但是我只希望图像可单击。
在本机中这怎么可能?
您能否检查此代码,这是一个有效的示例expo:
import * as React from 'react';
import { Text, View, StyleSheet ,Image,TouchableOpacity,Linking } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<TouchableOpacity onPress={() =>Linking.openURL("https://play.google.com/store/apps/details")}>
<Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() =>Linking.openURL("https://itunes.apple.com/fr/app")}>
<Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent:'space-around',
alignItems:'center',
},
});
如有任何疑问,请随时发表>>
您正在寻找的是{flexDirection:'row'}属性的样式。将代码复制到https://snack.expo.io/