Components of React-Native

When tried to make a real project on react native, I find it’s really hard to handle the components provided by react native.

It’s confusing that react native discard all the html components and provide its totally new components. Besides, the react native components don’t cover all the html ones. These increase a lot difficulties on the  development of  react native.

So I try to match the react native components with html ones, which will help me in the future’s work.

1. <div> => <View>

<View style=”” > </View>

2. <Img> => <Image>

 <Image source={{uri: ‘http://xxx.xxx.xx&#8217;}}> </Image>

3. <ul> => <ListView>


<ListView

dataSource={this.state.dataSource}

renderRow={(rowData) => <Text>{rowData}</Text>} />
visit here for details

4. <span> => <Text>

<Text> Hello World</Text>

5. <input> => <TextInput>

 <TextInput

style={{height: 40, borderColor: ‘gray’, borderWidth: 1}}

onChangeText={(text) => this.setState({text})}

value={this.state.text} />

visit here for details

6. <Button> => <Button>

firstly, install this lib:  npm install  apsl-react-native-button

Secondly, add “import Button from ‘apsl-react-native-button‘ ” into code;

<Button style={{backgroundColor: ‘red’}}  textStyle={{fontSize: 18}}>
  Hello!
</Button>

visit here for details
we can use react-native-button as well.

7. <Select> => <ListPopover>

firstly, install this lib:  npm install react-native-list-popover

Secondly, add “import ListPopover from ‘react-native-list-popover‘ ” into code;

<ListPopover
list={items}
isVisible={this.state.isVisible}
onClick={this.setItem}
onClose={this.closePopover}/>

visit here for details

Of course this isn’t the best matching one, but I think this is the simplest one.

 

To be continued.

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s