Question

我创建了一个抽屉组件，在其中我要在选择特定项目时添加一些样式。基本上我想在选择一个活动项目时添加简单的边框半径。这是我要构建活动项目的演示：

[这就是我现在所拥有的]

这是我的代码：

class customDrawerContentComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      email: '',
      mobile: ''
    }
  }

  async componentDidMount() {
    const value = await AsyncStorage.getItem('userInfo')
    let userInfo = JSON.parse(value)

    this.setState({
      username: userInfo.username,
      email: userInfo.email,
      mobile: userInfo.mobile
    })
  }

  render() {
    console.log('props: ', this.props)
    return (
      <Container>
        <View style={{height: 250, backgroundColor: '#fff'}}>
          <Body style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Image 
              style={styles.drawerImage}  
              source={require('./assets/img/weta.png')} />
          </Body>
        </View>

        <Content>

          <TouchableOpacity onPress={()=> this.props.navigation.navigate('UpdateProfile')} activeOpacity={1}>
            <View style={{marginVertical: 20, borderBottomWidth: 1, borderTopWidth: 1, borderBottomColor: '#ECE8EA', borderTopColor: '#ECE8EA', marginHorizontal: 20, flex: 1, justifyContent:'space-between', flexDirection: 'row'}}>
              <View style={{marginVertical: 10, position:'relative'}} >
                <Image source={require('./assets/img/avatar.png')}/>
              </View>
              <View style={{marginVertical: 10}}>
                <Text style={{ fontSize: 16, color: '#D5D2D3' }}> { this.state.username }</Text>
                <Text style={{ fontSize: 18, color: '#959394' }}> { this.state.mobile } </Text>
                <Text style={{ fontSize: 18, color: '#959394' }}> { this.state.email } </Text>
              </View>
            </View>
          </TouchableOpacity>

          <DrawerItems {...this.props} />
        </Content>
      </Container>
    )
  }
}

const AppStackNavigator = createStackNavigator({
  Map: {
    screen: Maps,
    navigationOptions: () => ({
      header: null
    })
  },
  UpdateProfile: {
    screen: UpdateProfileScreen,
    navigationOptions: () => ({
      header: null
    })
  },
  SearchDetails: {
    screen: SearchDetails,
    navigationOptions: () => ({
      header: null
    })
  }
})

const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen : AppStackNavigator,
    navigationOptions: () => ({
      title: `Vendor Show`,
      drawerIcon: ({ tintColor, activeItemKey }) => (
        <View>
          <Image source={require('./assets/img/s_logo.png')} color={tintColor} style={{height: 24, width: 24}}/>
        </View>
      )
    })
  },
  Search: {
    screen: SearchScreen,
    navigationOptions: () => ({
      title: `Search by`
    })
  },
  Vendor: {
    screen: HomeScreen,
    navigationOptions: () => ({
      title: `Vendor List`,
    })
  },
  Notifications: {
    screen: NotificationScreen
  },
  Events: EventsScreen,
  Venue : {
    screen: VenueAvailabilityScreen,
    navigationOptions: () => ({
      title: `Venue Availability`,
    })
  },
  Settings: {
    screen: SettingsScreen
  }
}, {
  drawerPosition: 'left',
  contentComponent: customDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoure: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
  drawerWidth: 320,
  contentOptions: {
    activeTintColor: '#fff',
    inactiveTintColor: '#030303',
    activeBackgroundColor: '#B90066',
    inactiveBackgroundColor: '#fff',
    itemsContainerStyle: {
      marginHorizontal: 10,
      border: 60
    },
    itemStyle: {
      height: 40,
      border: 60
    },
    activeLabelStyle: {
      fontSize: 20, 
      fontWeight: 'normal'
    },
    inactiveLabelStyle: {
      fontSize: 20, 
      fontWeight: 'normal'
    },
    iconContainerStyle: {
      border: 60
    } 
  }
  })

我正在使用反应导航“ ^ 3.0.0”。

在自定义抽屉组件上实现样式

0 个答案: