在本机反应中将 TouchableOpacity 与 flexbox 对齐答案

【问题标题】：Alignt TouchableOpacity with flexbox in react native在本机反应中将 TouchableOpacity 与 flexbox 对齐
【发布时间】：2020-04-20 11:19:52
【问题描述】：

我在将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 的组合，但它不起作用。对于其他所有元素，它都在工作，但在这种情况下不是。
结果是这样的：

我希望它们排成一行。

【问题讨论】：

标签： css reactjs react-native jsx

【解决方案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>

希望对你有帮助。

【讨论】：