我可以使用react-native flex类似于引导行/列系统吗？

Question

在这样的反应原生中使用flex是一个好主意吗？创建你自己的组件来恢复flex的值？我之前使用bootstrap网格系统，现在我试图学习反应原生。

有什么办法可以在堆栈上使用react-native bootstrap来显示这个例子吗？

let FlexContainer = ({direction,children}) =>{ 
 
    console.log(direction) 
 
    var style = { 
 
    
 
    flexDirection:direction || 'row', 
 
    display:'flex', 
 
    width:'100%', 
 
    height:'100%' 
 
    
 
    } 
 
    return(<div style={style}>{children}</div>) 
 

 
} 
 

 
let FlexBox = ({val, color, children}) => { 
 

 
    return (
 
    <div style={{backgroundColor:color, flex:val}}>{children}</div> 
 
) 
 

 
} 
 

 

 

 

 
class LayoutExample extends React.Component { 
 

 
    constructor(props){ 
 
    super(props) 
 
    } 
 
    
 
    render(){ 
 
    
 
    return(
 
    <div className='screen'> 
 
     <FlexContainer> 
 
     <FlexBox val={1} /> 
 
     <FlexBox color="blue" val={1} /> 
 
     <FlexBox color="red" val={1} /> 
 
     </FlexContainer> 
 
    </div> 
 
    ) 
 
    
 
    
 
    } 
 

 
} 
 

 
ReactDOM.render(<LayoutExample />,document.getElementById('example'))

.screen { 
 

 
    width:400px; 
 
    height:300px; 
 
    border:2px solid black; 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 

 
<div id="example"></div>

是这种方法有效与否？

Answer 1

它是有效的，尽管在我看来最好是尽可能将风格考虑与逻辑分开。

我以前也用bootstrap工作，但是因为我搬家了，所以我没有使用任何网格系统，我也没有觉得我错过了什么，我根据自己需要的每个屏幕样式屏幕，并诅咒试图尽可能重用组件。