css - 在本机反应中将 TouchableOpacity 与 flexbox 对齐

Question

我TouchableOpacity在一行中对齐图标时遇到问题。
这是我的代码：

<View style={styles.container12}>
    <View style={styles.sociaContainer}>
        <TouchableOpacity style={styles.socialIcon}
            onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
            <Icon name="facebook" size={50} color="#fff" />
        </TouchableOpacity>
        <TouchableOpacity style={styles.socialIcon}
            onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
            <Icon name="instagram" size={50} color="#fff" />
        </TouchableOpacity>
    </View>
    <Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
</View>


const styles = StyleSheet.create({
    socialIcon: {
        alignItems: 'center',
        flexDirection: 'row',
        marginLeft: 50,
    },

    container12: {
        flex: 1,
        flexDirection: 'row',
        marginTop: 20,
    },
});

我尝试了所有我知道的与 flex 的组合，但它不起作用。对于每个其他元素，它都在工作，但在这种情况下不是。
这是结果：

我要他们排成一排。

标签： cssreactjsreact-nativejsx

Answer 1

只需简单的样式更改即可使您的代码正常工作。检查这个

<View style={styles.container12}>
    {/* <View style={styles.sociaContainer}> */}
    <View style={styles.container12}>
        <TouchableOpacity style={styles.socialIcon}
            onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
            <Icon name="facebook" size={50} color="#fff" />
        </TouchableOpacity>
        <TouchableOpacity style={styles.socialIcon}
            onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
            <Icon name="instagram" size={50} color="#fff" />
        </TouchableOpacity>
    </View>
    <Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
</View>

希望这会帮助你。