<div classNames="container">
    <div className="a">A</div>
    <div  className="c"></div>
    <div className="b">B</div>
</div>
.container{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-item:space-between;
}
.a{
    flex:1 1 30px;
}
.b{
    flex:1 1 30px;
}
.c{
    width:20px;
}

roughly like this, adding an empty 20px div, in the middle is just an idea. Maybe some attributes are not written correctly, so don't worry about it

   render(){
        let leftcontent1 = "React NativeFlexbox";
        let leftcontent2 = "H";
        let rightcontent = "";
        return <View style={{flex:1, alignItems:'center'}}>

            <TouchableOpacity style={styles.button} activeOpacity={0.8} onPress={this.test.bind(this,3,4)}>
                <Text>test </Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.button} activeOpacity={1} onPress={()=>{this.testB(3,4)}}>
                <Text>testB</Text>
            </TouchableOpacity>
            <View style={{flex:1,width:"100%",flexDirection:'row',justifyContent:"space-between"}}>
                <View style={[styles.item,{minWidth: 30,flexShrink:2}]}>
                    <Text>{leftcontent1}</Text>
                </View>
                <View style={[styles.item,{minWidth: 30,marginLeft: 20,}]}>
                    <Text>{rightcontent}</Text>
                </View>
               </View>
        </View>
    }