在本机反应中只有一行带有按钮的动态列表
Dynamic List with Button in only one row in react native
我想在 React Native 中制作一个包含动态列表视图的屏幕 Listview but only one row contains a button。我正在使用本机基础库来制作屏幕的 UI,因为给出了各种 ListView 组件,但是没有给出如何制作这种类型的列表视图。我进行了很多搜索,但找不到任何具有此类 Listview 的库。
如果有人可以建议一种设计这种类型的列表视图的方法,那将是一个非常大的帮助。提前致谢!!
这是我的代码实现
export default class AddNewMember extends Component {
constructor(props) {
super(props)
this.state = {
registerButtonClicked: false
}
}
registerButtonClick = () => {
this.setState({
registerButtonClicked: true
})
}
_renderRow = () => {
var items = [
'Simon Mignolet',
'Nathaniel Clyne',
'Dejan Lovren',
'Mama Sakho',
'Emre Can'
]
for (i = 0; i < items.length; i++) {
if (items[i] === 'Simon Mignolet') {
return (
<ListItem style={{ flex: 1 }}>
<Text style={{ marginLeft: 25 }}>Vikas</Text>
</ListItem>
)
} else {
return (
<ListItem style={{ flex: 1 }}>
<Text style={{ marginLeft: 25 }}>{items[i]}</Text>
</ListItem>
)
}
}
}
CardHeader = () => {
var items = [
'Simon Mignolet',
'Nathaniel Clyne',
'Dejan Lovren',
'Mama Sakho',
'Emre Can'
]
if (this.state.registerButtonClicked) {
return (
<List
style={{ marginTop: 12, flex: 1 }}
dataArray={items}
renderRow={item => (
<ListItem>
<Text style={{ marginLeft: 25 }}>{item}</Text>
</ListItem>
)}
/>
)
} else {
return (
<Content>
/* <Card transparent>
<CardItem>
<View style={{ flexDirection: 'row', flex: 0 }}>
<Text style={styles.participant_name}>
Harish Venkatesh
</Text>
<TouchableOpacity
onPress={() => this.registerButtonClick()}
>
<Text
style={{
fontSize: 12,
marginLeft: 30,
letterSpacing: 0,
lineHeight: 16,
height: 20,
marginTop: 10,
width: 250
}}
>
Register New Player
</Text>
</TouchableOpacity>
</View>
</CardItem>
</Card>*/
<List
style={{ flex: 1, marginTop: 12 }}
dataArray={items}
renderRow={this._renderRow}
/>
</Content>
)
}
}
text = () => {
if (this.state.registerButtonClicked) {
return (
<Text
style={{
fontSize: 14,
color: '#951b1f',
letterSpacing: 0,
lineHeight: 20,
textAlign: 'left',
marginLeft: 30,
marginBottom: 12,
marginTop: 30
}}
>
Add New Participant
</Text>
)
} else {
return (
<Text
style={{
fontSize: 14,
color: '#000000',
letterSpacing: 0,
lineHeight: 20,
textAlign: 'left',
marginLeft: 30,
marginBottom: 12,
marginTop: 30
}}
>
PARTICIPANTS DETAILS{' '}
</Text>
)
}
}
registerCardorAddDetailsCard = () => {
if (this.state.registerButtonClicked) {
return (
<Card style={{ flex: 1, marginTop: 20 }} cardBody>
<Item
style={{
marginLeft: 27
}}
>
<Icon active name="person-add" />
<Input
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0
}}
placeholder="Participant Name"
/>
</Item>{' '}
<Item
style={{
marginLeft: 27
}}
>
<Icon active name="calendar" />
<Input
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0
}}
placeholder="Date of Birth"
keyboardType="numeric"
/>
</Item>{' '}
<Item
style={{
marginLeft: 27
}}
>
<Icon active name="calendar" />
<Input
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0
}}
placeholder="Email address"
keyboardType="email-address"
/>
</Item>
</Card>
)
} else {
return (
<Card cardBody>
{' '}
<Text
style={{
fontSize: 17,
marginLeft: 20,
marginTop: 15,
marginBottom: 15,
color: '#000000',
letterSpacing: 0,
opacity: 0.5
}}
>
+91-8840415633
</Text>
<Separator />
<Text
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0,
marginLeft: 27,
marginTop: 15,
marginBottom: 15,
opacity: 0.5
}}
>
30 Dec 1994
</Text>
<Separator />
<Item
style={{
marginLeft: 27
}}
>
<Input
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0
}}
placeholder="harishvenkatesh@ontroapp.com"
/>
</Item>
</Card>
)
}
}
render() {
return (
<View style={{ flex: 1 }}>
{this.CardHeader()} {this.text()}
{this.registerCardorAddDetailsCard()}
</View>
)
}
}
我在 _renderRow 函数中尝试进行条件渲染,但仍然没有成功。
你可以学习条件渲染。
这样您就可以满足您的要求。
最简单的方法是使用正在呈现的项目的索引。
_renderRow = (rowData, secId, rowId) => {
if (rowId === 0) {
// your custom list item, renders only for first row
return (
<ListItem style={{ flex: 1 }}>
<Text style={{ marginLeft: 25 }}>Vikas</Text>
</ListItem>
)
}
return (
<ListItem style={{ flex: 1 }}>
<Text style={{ marginLeft: 25 }}>{rowData}</Text>
</ListItem>
)
}
NativeBase 的 List
组件在后台使用 ListView
组件,因此您可以在此处查看其文档 http://facebook.github.io/react-native/docs/listview.html#renderrow
This part below is just general suggestion and my IMHO
一般来说,我建议您使用 FlatList,因为 ListView 已被弃用,而 FlatList 的性能要好得多。此外,我建议尽可能避免使用像 NativeBase 这样的 UI 库,因为它们的组件通常是 React Native 提供的原生组件的包装版本,带有一些默认值,这可能会让你的生活在开始时更轻松, 但它会阻止你学习真正的结构和组件,以后你将无法创建更复杂的组件,并且没有可用的库供你使用。
Edit per your comments
在您的代码中,您没有向 _renderRow 函数发送 rowData、rowId
您应该将这些传递给 this._renderRow,如下所示。
<List style={{ marginTop: 12, }} dataArray={items} renderRow={(item, sectionID, rowID) => this._renderRow(item, sectionId, rowId)}> </List>
或者你也可以这样做
<List style={{ marginTop: 12, }} dataArray={items} renderRow={this._renderRow}> </List>
我想在 React Native 中制作一个包含动态列表视图的屏幕 Listview but only one row contains a button。我正在使用本机基础库来制作屏幕的 UI,因为给出了各种 ListView 组件,但是没有给出如何制作这种类型的列表视图。我进行了很多搜索,但找不到任何具有此类 Listview 的库。
如果有人可以建议一种设计这种类型的列表视图的方法,那将是一个非常大的帮助。提前致谢!!
这是我的代码实现
export default class AddNewMember extends Component {
constructor(props) {
super(props)
this.state = {
registerButtonClicked: false
}
}
registerButtonClick = () => {
this.setState({
registerButtonClicked: true
})
}
_renderRow = () => {
var items = [
'Simon Mignolet',
'Nathaniel Clyne',
'Dejan Lovren',
'Mama Sakho',
'Emre Can'
]
for (i = 0; i < items.length; i++) {
if (items[i] === 'Simon Mignolet') {
return (
<ListItem style={{ flex: 1 }}>
<Text style={{ marginLeft: 25 }}>Vikas</Text>
</ListItem>
)
} else {
return (
<ListItem style={{ flex: 1 }}>
<Text style={{ marginLeft: 25 }}>{items[i]}</Text>
</ListItem>
)
}
}
}
CardHeader = () => {
var items = [
'Simon Mignolet',
'Nathaniel Clyne',
'Dejan Lovren',
'Mama Sakho',
'Emre Can'
]
if (this.state.registerButtonClicked) {
return (
<List
style={{ marginTop: 12, flex: 1 }}
dataArray={items}
renderRow={item => (
<ListItem>
<Text style={{ marginLeft: 25 }}>{item}</Text>
</ListItem>
)}
/>
)
} else {
return (
<Content>
/* <Card transparent>
<CardItem>
<View style={{ flexDirection: 'row', flex: 0 }}>
<Text style={styles.participant_name}>
Harish Venkatesh
</Text>
<TouchableOpacity
onPress={() => this.registerButtonClick()}
>
<Text
style={{
fontSize: 12,
marginLeft: 30,
letterSpacing: 0,
lineHeight: 16,
height: 20,
marginTop: 10,
width: 250
}}
>
Register New Player
</Text>
</TouchableOpacity>
</View>
</CardItem>
</Card>*/
<List
style={{ flex: 1, marginTop: 12 }}
dataArray={items}
renderRow={this._renderRow}
/>
</Content>
)
}
}
text = () => {
if (this.state.registerButtonClicked) {
return (
<Text
style={{
fontSize: 14,
color: '#951b1f',
letterSpacing: 0,
lineHeight: 20,
textAlign: 'left',
marginLeft: 30,
marginBottom: 12,
marginTop: 30
}}
>
Add New Participant
</Text>
)
} else {
return (
<Text
style={{
fontSize: 14,
color: '#000000',
letterSpacing: 0,
lineHeight: 20,
textAlign: 'left',
marginLeft: 30,
marginBottom: 12,
marginTop: 30
}}
>
PARTICIPANTS DETAILS{' '}
</Text>
)
}
}
registerCardorAddDetailsCard = () => {
if (this.state.registerButtonClicked) {
return (
<Card style={{ flex: 1, marginTop: 20 }} cardBody>
<Item
style={{
marginLeft: 27
}}
>
<Icon active name="person-add" />
<Input
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0
}}
placeholder="Participant Name"
/>
</Item>{' '}
<Item
style={{
marginLeft: 27
}}
>
<Icon active name="calendar" />
<Input
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0
}}
placeholder="Date of Birth"
keyboardType="numeric"
/>
</Item>{' '}
<Item
style={{
marginLeft: 27
}}
>
<Icon active name="calendar" />
<Input
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0
}}
placeholder="Email address"
keyboardType="email-address"
/>
</Item>
</Card>
)
} else {
return (
<Card cardBody>
{' '}
<Text
style={{
fontSize: 17,
marginLeft: 20,
marginTop: 15,
marginBottom: 15,
color: '#000000',
letterSpacing: 0,
opacity: 0.5
}}
>
+91-8840415633
</Text>
<Separator />
<Text
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0,
marginLeft: 27,
marginTop: 15,
marginBottom: 15,
opacity: 0.5
}}
>
30 Dec 1994
</Text>
<Separator />
<Item
style={{
marginLeft: 27
}}
>
<Input
style={{
fontSize: 17,
color: '#000000',
letterSpacing: 0
}}
placeholder="harishvenkatesh@ontroapp.com"
/>
</Item>
</Card>
)
}
}
render() {
return (
<View style={{ flex: 1 }}>
{this.CardHeader()} {this.text()}
{this.registerCardorAddDetailsCard()}
</View>
)
}
}
我在 _renderRow 函数中尝试进行条件渲染,但仍然没有成功。
你可以学习条件渲染。 这样您就可以满足您的要求。
最简单的方法是使用正在呈现的项目的索引。
_renderRow = (rowData, secId, rowId) => {
if (rowId === 0) {
// your custom list item, renders only for first row
return (
<ListItem style={{ flex: 1 }}>
<Text style={{ marginLeft: 25 }}>Vikas</Text>
</ListItem>
)
}
return (
<ListItem style={{ flex: 1 }}>
<Text style={{ marginLeft: 25 }}>{rowData}</Text>
</ListItem>
)
}
NativeBase 的 List
组件在后台使用 ListView
组件,因此您可以在此处查看其文档 http://facebook.github.io/react-native/docs/listview.html#renderrow
This part below is just general suggestion and my IMHO
一般来说,我建议您使用 FlatList,因为 ListView 已被弃用,而 FlatList 的性能要好得多。此外,我建议尽可能避免使用像 NativeBase 这样的 UI 库,因为它们的组件通常是 React Native 提供的原生组件的包装版本,带有一些默认值,这可能会让你的生活在开始时更轻松, 但它会阻止你学习真正的结构和组件,以后你将无法创建更复杂的组件,并且没有可用的库供你使用。
Edit per your comments
在您的代码中,您没有向 _renderRow 函数发送 rowData、rowId
您应该将这些传递给 this._renderRow,如下所示。
<List style={{ marginTop: 12, }} dataArray={items} renderRow={(item, sectionID, rowID) => this._renderRow(item, sectionId, rowId)}> </List>
或者你也可以这样做
<List style={{ marginTop: 12, }} dataArray={items} renderRow={this._renderRow}> </List>