react-native 返回元件的問題
阿新 • • 發佈:2018-12-10
問題描述:在react-native中,我們開發一個元件時最終返回的內容一般都是一個 View 或者 Content 元件,其餘的內容都包裹在這個元件中進行返回。直接來說,我們最終只相當於返回的一個 View 或者 Content 元件!!如下圖:
程式碼:
export class Demo extends Component { constructor() { super(); this.state = { }; } render() { return ( <Container> <HeaderDark> <Left> <HeaderBack navigation={this.props.navigation}/> </Left> <Body> <HeaderCaption>整改詳情</HeaderCaption> </Body> <Right></Right> </HeaderDark> <Content contentContainerStyle={{flex: 1,justifyContent: 'flex-start',alignItems: 'stretch',overflow: 'hidden', backgroundColor: '#fff',borderRadius: 8,marginHorizontal:19,marginBottom: 19, padding:16,}}> <Text>內容1</Text> <Text>內容2</Text> <Text>內容3</Text> <Text>內容4</Text> <Text>內容5</Text> </Content> </Container> ); } }
效果:
但是:如果需要同時返回幾個 View 或者 Content 時,該怎麼辦呢?
方法1:在幾個 View 的最外面再包裹一個總的 View,如下圖:
方法2:return返回一個數組,陣列元素為 單個的 View 或者 Content元件,如下圖:
注意:1. 這種方法和 方法1 在原理上其實是一個的,最終都是放回一個 Container 元件。
2. 這種方式不能用在 render 中,只能用在函式中返回 元件 的情況。
renderCon 函式:
效果如下(和直接寫在 render 中是一樣的):
文章僅為本人學習過程的一個記錄,僅供參考,如有問題,歡迎指出!